Bagaimana Kita Boleh Mengumpulkan Elemen Keturunan dalam CSS?

Pemilih CSS Sukar untuk Pengumpulan Keturunan

Walaupun CSS menyediakan pilihan yang berkuasa untuk elemen penggayaan, satu ketiadaan yang ketara ialah keupayaan untuk mengumpulkan keturunan dengan mudah . Had ini menjadi jelas apabila menggayakan elemen kompleks seperti jadual HTML, dengan menetapkan gaya yang sama kepada kedua-dua tajuk lajur dan sel memerlukan pemilih yang rumit.

Dilema Penggayaan Keturunan

Pertimbangkan contoh jadual berikut:

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

Untuk menggayakan kedua-dua tajuk dan sel dengan pemilih tunggal, seseorang biasanya akan menggunakan:

<code class="css">#myTable th, #myTable td {}</code>

Walau bagaimanapun, pendekatan ini bertele-tele dan membosankan apabila berurusan dengan sejumlah besar elemen.

Pemilih (th, td): Peluang Terlepas

Sintaks yang lebih intuitif ialah menggunakan pemilih kumpulan yang serupa dengan :

<code class="css">#myTable (th, td) {}</code>

Malangnya, sintaks sedemikian tidak wujud dalam CSS.

Kesia-siaan Cadangan Pra-2008

Nampaknya , kekurangan pemilih kumpulan keturunan telah menjadi isu lama. Percubaan awal untuk memperkenalkan satu, seperti kelas pseudo :any() yang dicadangkan pada tahun 2008, tidak mendapat tarikan.

Perkembangan Terkini dan Cahaya Harapan

Walau bagaimanapun, draf kerja tahap 4 Selectors memperkenalkan semula konsep kumpulan pseudo-class, :matches(). Walaupun cadangan ini menunjukkan janji, sokongan penyemak imbas masih jauh.

Penyelesaian Alternatif

Sementara itu, terdapat beberapa penyelesaian untuk pengumpulan keturunan:

• Menggunakan pemilih *:

  <code class="css">#myTable tr > * {}</code>

  Salin selepas log masuk

  (Perhatikan bahawa ini menganggap elemen tr hanya mengandungi elemen td atau ke dan bukan elemen lain)

• Berpegang teguh pada pendekatan td, td untuk prestasi maksimum

Kesimpulan

Ketiadaan pemilih pengelompokan keturunan dalam CSS telah menjadi isu berterusan selama bertahun-tahun . Walaupun cadangan baru-baru ini menawarkan secercah harapan, sokongan penyemak imbas yang meluas masih sukar difahami. Sehingga itu, pembangun mesti bergantung pada pendekatan alternatif atau meletak jawatan mereka dengan kata-kata pemilih ke, td yang sedia ada.

Atas ialah kandungan terperinci Bagaimana Kita Boleh Mengumpulkan Elemen Keturunan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!