Kann CSS auf n-te untergeordnete Elemente über mehrere übergeordnete Elemente hinweg abzielen?

Targeting auf das n-te Kind über mehrere Eltern hinweg in CSS: Ein ungelöstes Rätsel

Im Bereich CSS die Möglichkeit, bestimmte untergeordnete Elemente auszuwählen innerhalb eines Elternteils ist seit langem ein Grundnahrungsmittel für Webdesigner. Wenn es jedoch darum geht, n-te untergeordnete Elemente über mehrere übergeordnete Elemente hinweg anzusprechen, wird der Weg mit Komplexitäten beladen.

Stellen Sie sich das folgende Szenario vor: Sie haben einen div.foo-Container mit mehreren ul-Elementen, die jeweils eine Reihe von enthalten li Artikel. Sie möchten das Styling speziell auf das erste und dritte li-Element in allen uls in div.foo anwenden.

Auf den ersten Blick scheint das folgende CSS eine einfache Lösung zu sein:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

Dieser Ansatz greift jedoch aufgrund der inhärenten Einschränkung des :nth-child()-Selektors von CSS zu kurz. Es kann nur auf untergeordnete Elemente innerhalb desselben unmittelbaren übergeordneten Elements abzielen. Daher formatiert das obige CSS nur das erste untergeordnete Element jeder ul, was zu dem folgenden unerwünschten Ergebnis führt: http://jsfiddle.net/hTfVu/

Um das gewünschte Ergebnis zu erzielen, können CSS-Selektoren allein nicht ausreichen. JavaScript-Bibliotheken wie jQuery bieten eine praktische Lösung:

$('.foo li:eq(0), .foo li:eq(2)')

Dieser Code wählt das erste und dritte li-Element innerhalb jedes in div.foo enthaltenen ul aus.

Alternativ können Sie das explizit markieren Erstellen Sie erste und dritte li-Elemente mithilfe von Klassen oder IDs und richten Sie sie dann entsprechend über CSS aus. Dieser Ansatz erfordert jedoch eine Änderung der HTML-Struktur, die möglicherweise nicht immer machbar ist.

Zusammenfassend lässt sich sagen, dass die Ausrichtung auf Elemente des n-ten Kindes über mehrere Eltern hinweg ein ungelöstes Rätsel innerhalb der nativen CSS-Funktionen bleibt. Doch durch den Einsatz von JavaScript-Bibliotheken oder der Verwendung von explizitem HTML-Markup können diese Einschränkungen überwunden werden und ein präzises und differenziertes Styling über komplexe Dokumentstrukturen hinweg ermöglicht werden.

Das obige ist der detaillierte Inhalt vonKann CSS auf n-te untergeordnete Elemente über mehrere übergeordnete Elemente hinweg abzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!