So veranlassen Sie den n-ten-Kind-Selektor, versteckte Elemente zu ignorieren
Problem:
In CSS :nth-child()-Selektor zählt versteckte Elemente in seinen Berechnungen. Dies kann zu Störungen beim Ausblenden von Elementen mit display: none führen.
Lösung:
Um ausgeblendete Elemente auszuschließen, müssen wir sie vollständig aus dem DOM entfernen. Hier ist eine CSS-basierte Lösung und eine jQuery-basierte Lösung:
CSS-Lösung:
.hidden {
display: none !important;
}Die !important-Deklaration überschreibt die display: none-Regel und entfernt sie vollständig das Element aus dem Seitenlayout.
jQuery Lösung:
$('.hidden').remove();Die Methode „remove()“ entfernt die ausgeblendeten Elemente physisch aus dem DOM und stellt sicher, dass sie nicht vom Selektor :nth-child() gezählt werden.
Beispiel:
Betrachten Sie den folgenden HTML-Code Struktur:
<div class="container"> <div class="item"></div> <div class="item hidden"></div> <div class="item"></div> </div>
Mit dem nth-child(2n)-Selektor würde das zweite Element als Ziel ausgewählt. Wenn wir jedoch das zweite Element mit display: none ausblenden, wird es weiterhin vom Selektor gezählt.
Durch die Verwendung der bereitgestellten CSS- oder jQuery-Lösung würde das ausgeblendete Element vom n-ten nicht mehr berücksichtigt. child()-Selektor, was zum gewünschten Effekt führt.
Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass der :nth-child-Selektor ausgeblendete Elemente ignoriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
