Mengapa Anda Tidak Boleh Menghimpunkan Keturunan dalam Pemilih CSS?

Mengapa Anda Tidak Boleh Mengumpulkan Keturunan dalam Pemilih CSS?

Secara tradisinya, CSS tidak mempunyai kaedah yang cekap untuk menggunakan gaya yang sama kepada sekumpulan keturunan. Pertimbangkan jadual HTML 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 lajur dan sel, pemilih tradisional memerlukan menentukan kedua-dua elemen:

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

Mengapa tidak ada sintaks yang lebih ringkas seperti :

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

Evolusi Penyelesaian

Pada mulanya, tiada cadangan untuk sintaks yang berguna sehingga 2008, apabila kelas pseudo :any() dicadangkan . Mozilla melaksanakannya sebagai :-moz-any() pada tahun 2010, diikuti dengan WebKit :-webkit-any() pada tahun 2011.

Walau bagaimanapun, menggunakan kedua-dua awalan secara serentak memerlukan set peraturan pendua, mengalahkan tujuan. Akibatnya, pemilih awalan ini kini dianggap tidak praktikal.

Draf kerja tahap 4 Pemilih kini mengandungi cadangan untuk :matches(), berdasarkan asal :any() tetapi dengan potensi peningkatan. Walau bagaimanapun, sokongan penyemak imbas dijangka mengambil sedikit masa.

Penyelesaian

Untuk menggayakan kedua-dua elemen th dan td secara khusus, anda boleh menggunakan * sebaliknya, dengan mengandaikan bahawa elemen tr mengandungi hanya elemen sel:

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

Sebagai alternatif, atas sebab prestasi, anda mungkin lebih suka kaedah tradisional yang lebih panjang.

Atas ialah kandungan terperinci Mengapa Anda Tidak Boleh Menghimpunkan Keturunan dalam Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!