简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

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 Streisand
Barbara Streisandasal
2024-10-23 23:05:30173semak imbas

How to Style Specific Nested Elements across Different Parent Structures?

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

    .

    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

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


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

JavaScript jquery css for select using class this ul li
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Membetulkan Isu Pertindihan Div dengan z-index?Artikel seterusnya：Bagaimana untuk Membetulkan Isu Pertindihan Div dengan z-index?

Artikel berkaitan

Lihat lagi