So formatieren Sie bestimmte n-te untergeordnete Elemente über mehrere übergeordnete Elemente hinweg in CSS

Styling spezifischer n-ter Kinder über mehrere Eltern hinweg

Beim Stylen verschachtelter Elemente mithilfe des N-ten-Kind-Selektors ist es wichtig zu beachten, dass der Selektor arbeitet in einem einzigen übergeordneten Kontext. Dies kann zu Herausforderungen führen, wenn bestimmte untergeordnete Elemente über mehrere Eltern hinweg gezielt angesprochen werden.

Das Problem:

Beachten Sie das folgende Markup:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Das Ziel ist es, das erste und dritte li-Element in .foo zu formatieren. Verwenden des folgenden CSS:

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

Dieser Ansatz funktioniert nicht, da das n-te Kind das erste und dritte Kind jeder ul auswählt.

Die Lösung:

Mit CSS allein ist es nicht möglich, n-te Kinder über mehrere Eltern hinweg anzusprechen. Es gibt jedoch alternative Lösungen:

• JavaScript: Bibliotheken wie jQuery machen es einfach, DOM-Elemente zu manipulieren und bestimmte auszuwählen, wie z. B. $('.foo li:eq( 0), .foo li:eq(2)').
• Explizites Markup: Fügen Sie dem ersten und dritten li-Element explizit Klassen oder IDs hinzu, wie zum Beispiel:

<div class="foo">
    <ul>
        <li class="first">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="third">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Dann gestalten Sie sie mit den neu hinzugefügten Klassen:

.foo li.first,
.foo li.third
{
    color: red;
}

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