Bagaimana untuk Menyasarkan anak ke-nth Merentasi Pelbagai Ibu Bapa dalam CSS?

CSS: Menyasarkan anak ke-nth Merentasi Pelbagai Ibu Bapa

Masalah

Pertimbangkan struktur HTML berikut:

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

The matlamat adalah untuk menggayakan item senarai "satu" dan "tiga" dalam warna merah. Walau bagaimanapun, menggunakan pemilih CSS:

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

menggayakan anak pertama setiap ul sebaliknya.

Penyelesaian

Pendekatan CSS Sahaja:

Malangnya, tidak mungkin untuk memilih anak ke-nth merentas berbilang ibu bapa menggunakan CSS sahaja. Baik :nth-child() mahupun adik beradik combinator tidak membenarkan pilihan sedemikian.

Javascript atau Manipulasi DOM:

Untuk mencapai penyasaran sedemikian, anda boleh menggunakan Javascript atau DOM teknik manipulasi. Contohnya, menggunakan jQuery:

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

Pemarkahan Kelas atau ID:

Sebagai alternatif, anda boleh menandai item senarai sasaran secara eksplisit dengan kelas atau ID. Contohnya:

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

Kemudian, gaya menggunakan kelas atau ID yang ditanda:

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

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan anak ke-nth Merentasi Pelbagai Ibu Bapa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!