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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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
<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
<br><ul></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
