Pemilih Anak (pemilih CSS)

3

Keterangan

pemilih ini sepadan dengan semua elemen yang merupakan anak -anak segera dari elemen yang ditentukan. Gabungan dalam pemilih kanak-kanak adalah tanda yang lebih besar daripada (>). Ia boleh dikelilingi oleh watak -watak Whitespace, tetapi jika ia, Internet Explorer 5 di Windows akan secara tidak betul memperlakukannya sebagai pemilih keturunan. Jadi amalan terbaik adalah untuk menghindari Whitespace di sekitar gabungan ini.

Pertimbangkan serpihan HTML ini:

Mari cuba memadankan elemen dalam serpihan di atas dengan pemilih di bawah:

pemilih kanak -kanak di atas hanya akan sepadan dengan dua elemen li yang merupakan anak -anak elemen UL. Ia tidak akan sepadan dengan subitem, kerana ibu bapa mereka adalah elemen OL.

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

Contoh

Berikut adalah contoh pemilih kanak -kanak di tempat kerja:

ul>li {
  ⋮ <span>declarations
</span>}

pemilih ini sepadan dengan semua elemen li yang merupakan anak -anak segera elemen UL -iaitu, semua elemen li yang mempunyai elemen UL sebagai ibu bapa.

Soalan Lazim (Soalan Lazim) Mengenai CSS Child Selectors

Apakah perbezaan antara pemilih kanak -kanak dan pemilih keturunan dalam CSS? Pemilih kanak -kanak menggunakan simbol ">", manakala pemilih keturunan menggunakan ruang. Sebagai contoh, "div> p" hanya memilih perenggan yang langsung kanak-kanak div, manakala "div p" memilih semua perenggan dalam div, tanpa mengira tahap bersarang mereka. Sebagai contoh, "Div> P: anak pertama" hanya akan memilih perenggan pertama yang merupakan anak langsung div. Ini berguna apabila anda mahu menggunakan gaya hanya kepada anak pertama elemen. Sebagai contoh, "div> input [type = 'text']" akan memilih semua medan input teks yang merupakan kanak -kanak langsung div. Sebagai contoh, "#mydiv> .myclass" akan memilih semua elemen dengan kelas "myclass" yang merupakan anak -anak langsung elemen dengan id "mydiv".

ul>li {
  ⋮ <span>declarations
</span>}

Bolehkah saya menggunakan pemilih kanak-kanak untuk menyasarkan hanya anak terakhir elemen? Sebagai contoh, "Div> P: Last-Child" hanya akan memilih perenggan terakhir yang merupakan anak langsung div. Ini berguna untuk menyesuaikan susun atur dan gaya berdasarkan saiz skrin atau jenis peranti.

Bolehkah saya menggunakan pemilih kanak-kanak dengan elemen pseudo? Sebagai contoh, "div> p :: sebelum" akan memilih ":: sebelum" pseudo-elemen semua perenggan yang merupakan anak-anak langsung dari div. Pemilih kanak -kanak meningkatkan kekhususan peraturan, yang bermaksud ia akan mengatasi sebarang peraturan yang bertentangan dengan kekhususan yang lebih rendah. Sebagai contoh, "div> p" mempunyai kekhususan yang lebih tinggi daripada hanya "p". Sebagai contoh, "Div> P: Nth-Child (ODD)" akan memilih semua perenggan yang bernombor ganjil yang merupakan anak-anak langsung div. Walau bagaimanapun, ia tidak disokong dalam versi Internet Explorer 6 atau lebih tua. Sentiasa periksa sokongan penyemak imbas semasa apabila menggunakan pemilih CSS maju.

Atas ialah kandungan terperinci Pemilih Anak (pemilih CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!