Wie wende ich CSS-Stile auf bestimmte Elemente mit unterschiedlichen untergeordneten Strukturen an?

Styling über mehrere Eltern hinweg mit :nth-child

Problem:

Es wird sichergestellt, dass CSS-Selektoren bestimmte Elemente über mehrere hinweg beeinflussen Eltern mit unterschiedlichen Kinderelementstrukturen können eine Herausforderung darstellen. Betrachten Sie das folgende Beispiel:

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

Das Ziel besteht darin, einen bestimmten Stil auf die Listenelemente „eins“ und „drei“ anzuwenden. Die Verwendung der Selektoren :nth-child(1) und :nth-child(3) führt jedoch dazu, dass das erste und dritte Listenelement innerhalb jedes ul-Elements formatiert wird.

Lösung:

Leider , können CSS-Selektoren allein solche Variationen in Eltern-Kind-Strukturen nicht bewältigen. Der :nth-child()-Selektor und die Geschwisterkombinatoren sind auf die Auswahl von Elementen innerhalb desselben übergeordneten Elements beschränkt.

Alternative Ansätze:

• JavaScript: Bibliotheken wie jQuery kann verwendet werden, um bestimmte Elemente basierend auf ihrem Index oder ihrer Position innerhalb des DOM anzusprechen.
• Explizite Markierung: Das Hinzufügen von Klassen oder IDs zu den gewünschten Elementen (in diesem Fall eins und drei) ermöglicht für präzises Targeting mithilfe von CSS-Selektoren.

Zum Beispiel das Hinzufügen der Klasse „selected“ zum ersten und dritten Listenelement innerhalb des .foo-Elements:

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

CSS:

<code class="css">.foo li.selected {
    color: red;
}</code>

Das obige ist der detaillierte Inhalt vonWie wende ich CSS-Stile auf bestimmte Elemente mit unterschiedlichen untergeordneten Strukturen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!