Wie kann man in CSS das n-te Kind über mehrere Eltern hinweg ansprechen?

CSS: Ausrichtung auf das n-te Kind über mehrere Eltern hinweg

Problem

Bedenken Sie die folgende HTML-Struktur:

<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>

Die Ziel ist es, die Listenelemente „eins“ und „drei“ in Rot zu gestalten. Verwenden Sie jedoch den CSS-Selektor:

<code class="css">.foo li:nth-child(1),
.foo li:nth-child(3)</code>

formatiert stattdessen das erste untergeordnete Element jeder UL.

Lösung

Nur ​​CSS-Ansatz:

Leider ist es mit CSS allein nicht möglich, n-te Kinder über mehrere Eltern hinweg auszuwählen. Weder :nth-child() noch Geschwisterkombinatoren erlauben eine solche Auswahl.

Javascript- oder DOM-Manipulation:

Um ein solches Targeting zu erreichen, können Sie auf Javascript oder DOM zurückgreifen Manipulationstechniken. Zum Beispiel mit jQuery:

<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)').css('color', 'red');</code>

Klassen- oder ID-Markierung:

Alternativ können Sie die Ziellistenelemente explizit mit Klassen oder IDs markieren. Zum Beispiel:

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

Dann formatieren Sie es mit den markierten Klassen oder IDs:

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

Das obige ist der detaillierte Inhalt vonWie kann man in CSS das n-te Kind über mehrere Eltern hinweg ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!