Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?
Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?
- Barbara Streisandasal
- 2024-10-23 23:05:30255semak imbas
Menggayakan Elemen Nested nth-child merentas Berbilang Ibu Bapa
Mencari penyelesaian untuk menggayakan elemen bersarang tertentu dalam struktur induk yang berbeza-beza, pertimbangkan penanda berikut :
<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>
Matlamatnya adalah untuk menggunakan gaya pada "satu" dan "tiga", tidak kira sama ada mereka adalah anak pertama bagi setiap
- .
- pertama dan ketiga; elemen dalam bekas .foo:
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>Penanda Elemen Eksplisit:
Anda boleh menandai elemen yang diingini secara eksplisit dengan kelas atau ID untuk mendayakan pemilihannya melalui CSS. Sebagai contoh, menambah kelas pada
- pertama dan ketiga; elemen:
<li class="first">one</li> <li class="second">two</li>
Had :nth-child()
Percubaan untuk menggunakan :nth-child() gagal kerana ia hanya terpakai pada elemen yang berkongsi ibu bapa yang sama. Dalam senario ini, pemilih CSS .foo li:nth-child(1), .foo li:nth-child(3) hanya akan menyasarkan anak pertama setiap
- .
Penyelesaian Alternatif
JavaScript:
Menggunakan perpustakaan seperti jQuery membolehkan anda memilih elemen menggunakan keupayaan penapisan hebat JavaScript. Sebagai contoh, skrip berikut akan menyasarkan
<li class="third">three</li>
< ;/ul>
<li class="fourth">four</li>
Kemudian, anda boleh menggunakan CSS untuk menyasarkan elemen yang ditanda :
<code class="css">.foo .first,
.foo .third {
color: red;
}</code>Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!