Heim > Artikel > Web-Frontend > Wie stilisiert man bestimmte verschachtelte Elemente über verschiedene übergeordnete Strukturen hinweg?

Wie stilisiert man bestimmte verschachtelte Elemente über verschiedene übergeordnete Strukturen hinweg?

Barbara StreisandOriginal: 2024-10-23 23:05:30173Durchsuche

How to Style Specific Nested Elements across Different Parent Structures?

Styling verschachtelter n-ter-Kind-Elemente über mehrere übergeordnete Elemente hinweg

Wenn Sie nach einer Lösung suchen, um bestimmte verschachtelte Elemente in unterschiedlichen übergeordneten Strukturen zu formatieren, sollten Sie das folgende Markup berücksichtigen :

<br><div class="foo"></p>
<pre class="brush:php;toolbar:false"><ul>
    <li>one</li>
    <li>two</li>
</ul>
<ul>
    <li>three</li>
</ul>
<ul>
    <li>four</li>
</ul>

Das Ziel besteht darin, Stile auf „eins“ und „drei“ anzuwenden, unabhängig davon, ob es sich dabei um die jeweils ersten untergeordneten Elemente handelt.

Einschränkung von :nth-child()

Versuche, :nth-child() zu verwenden, scheitern, da es nur für Elemente gilt, die dasselbe übergeordnete Element haben. In diesem Szenario würde der CSS-Selektor .foo li:nth-child(1), .foo li:nth-child(3) nur auf die ersten untergeordneten Elemente von jedem

Alternative Lösungen

JavaScript:

Mit einer Bibliothek wie jQuery können Sie Elemente mithilfe der leistungsstarken Filterfunktionen von JavaScript auswählen. Das folgende Skript zielt beispielsweise auf das erste und dritte

Elemente innerhalb des .foo-Containers:
```
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>
```
Explizite Elementmarkierung:

Sie können die gewünschten Elemente explizit mit Klassen oder IDs markieren, um deren Auswahl per CSS zu ermöglichen. Das Hinzufügen von Klassen zum ersten und dritten

Elemente:

<br><ul></p>
<pre class="brush:php;toolbar:false"><li class="first">one</li>
<li class="second">two</li>

<li class="third">three</li>

< ;/ul>

<li class="fourth">four</li>

Dann können Sie CSS verwenden, um die markierten Elemente gezielt auszuwählen :

<code class="css">.foo .first,
.foo .third {
    color: red;
}</code>

Das obige ist der detaillierte Inhalt vonWie stilisiert man bestimmte verschachtelte Elemente über verschiedene übergeordnete Strukturen hinweg?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css for select using class this ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie behebe ich Div-Überlappungsprobleme mit Z-Index?Nächster Artikel：Wie behebe ich Div-Überlappungsprobleme mit Z-Index?

In Verbindung stehende Artikel

Mehr sehen