css: Wie verstecktes Kind in nth-Kind (ungerade) und N-Kind (gerade)

überspringen Ich versuche, versteckte Kind während nth-Kind (ungerade) und N-Kind (gerade) zu überspringen, aber es tut Überspringe diese versteckten Aufzeichnungen nicht.css: Wie verstecktes Kind in nth-Kind (ungerade) und N-Kind (gerade)

Ich habe den folgenden HTML- und CSS-Code.

<style> 
 
    ul { 
 
    list-style-type: none; 
 
    } 
 
    li { 
 
    height: 2em; 
 
    border: 1px solid black; 
 
    } 
 
    /* li:not(.hidden):nth-child(odd) { */ 
 
    li:nth-child(odd) { 
 
    background: khaki; 
 
    } 
 
    li:nth-child(even) { 
 
    background: indianred; 
 
    } 
 
    .hidden { 
 
    display: none; 
 
    } 
 
</style> 
 

 

 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="hidden">4</li> 
 
    <li class="hidden">5</li> 
 
    <li class="hidden">6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
</ul>

Ich möchte auf dem Browser zur Liste anzuzeigen alternative Farbe unabhängig von der Anzahl der versteckten Kinder haben sollte.

Quelle

2015-12-23 Musarrat Hussain

Möchten Sie einen JavaScript-Lösung akzeptieren? –

Nein, ich möchte kein Java-Skript verwenden, ich kenne die Lösung in js, aber ich bin auf die Verwendung von js beschränkt, ich muss css verwenden. –

es ist nicht möglich in CSS, müssen Sie möglicherweise ändern Sie Ihre HTML oder gehen Sie für Jquery-Lösung –

Sie müssen die ausgeblendeten Elemente aus dem DOM entfernen, anstatt sie einfach zu verbergen.

Quelle

2015-12-23 10:00:59

Da alle untergeordneten Elemente dynamisch erstellt werden und zu verschiedenen Ereignissen in ausgeblendet/anzeigen wechseln, kann ich nicht alle untergeordneten Elemente für jedes Ereignis entfernen und hinzufügen. –

http://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-another-selector –

Wenn Sie Ihre Dokumentstruktur verändern könnte, dann könnte man einen anderen Tag für die versteckten Gegenstände festgelegt, so dass Sie erweitern die :nth-of-type Pseudo-Klasse nehmen könnte:

CSS:

div.list p { 
    height: 2em; 
    border: 1px solid black; 
    margin: 0; 
    } 
    div.list p:nth-of-type(odd) { 
    background: khaki; 
    } 
    div.list p:nth-of-type(even) { 
    background: indianred; 
    } 
    .hidden { 
    display: none; 
    }

HTML:

<div class="list"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <span class="hidden">4</span> 
    <span class="hidden">5</span> 
    <span class="hidden">6</span> 
    <p>7</p> 
    <p>8</p> 
    <p>9</p> 
    <p>10</p> 
    <p>11</p> 
</div>

Quelle

2015-12-23 10:48:27

wenn wir den Typ des Elements ändern, das Sie dann getan haben es funktioniert, aber ich kann den Typ des Elements nicht ändern. auf der Grundlage eines Ereignisses kann sich die versteckte Klasse ändern, dann muss ich auch den Typ des Elements ändern. –

Als this answer explains gibt es derzeit keine Möglichkeit, dies rein mit CSS zu tun. Sie können dies umgehen, indem Sie den Code ändern, der die li Elemente verbirgt, sodass ein weiteres verstecktes Dummy-Element nach dem ausgeblendeten Element eingefügt wird, um die Dinge auszugleichen und es richtig aussehen zu lassen. Entfernen Sie dann dieses Dummy-Element, wenn Sie es ausblenden.

var hide = function (el) { 
    el.classList.add('hidden'); 
    el.insertAdjacentHTML('afterend', '<li class="hidden dummy"></li>'); 
    }, 
    show = function (el) { 
    if (el.classList.contains('hidden')) { 
     el.classList.remove('hidden'); 
     el.parentNode.removeChild(el.nextElementSibling); 
    } 
    };

Working fiddle here

Quelle

2015-12-23 11:24:16

css: Wie verstecktes Kind in nth-Kind (ungerade) und N-Kind (gerade)

Antwort

Verwandte Themen