Mengapa CSS Tidak Mempunyai Fungsi Pengumpulan Keturunan?

Mengapa Pemilih CSS Kurang Fungsi Pengumpulan Keturunan

Dalam CSS, menetapkan gaya kepada sekumpulan elemen bersarang boleh menyusahkan. Pertimbangkan jadual HTML di mana anda ingin menggayakan semua tajuk lajur dan sel. Anda mesti menggunakan pemilih berikut:

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

Nampaknya logik untuk mempunyai sintaks seperti:

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

Konteks Sejarah

Walau bagaimanapun , sintaks sedemikian tidak wujud kerana tiada cadangan untuknya dibuat sehingga 2008, dalam bentuk kelas pseudo :any().

Pelaksanaan Penyemak Imbas Awal

Mozilla mula-mula melaksanakannya sebagai :-moz-any() pada tahun 2010:

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

WebKit mencadangkan pendekatan yang serupa dengan :-webkit-any():

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

Walau bagaimanapun, menggunakan kedua-dua awalan memerlukan pendua set peraturan, menjadikan kod berlebihan.

Cadangan Moden

Draf Pemilih tahap 4 memperkenalkan :matches():

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

Cadangan ini masih dalam pembangunan, mengehadkan sokongan penyemak imbas.

Penyelesaian untuk Penggayaan Jadual

Untuk jadual, anda boleh menggunakan pemilih universal * untuk menyasarkan kedua-dua dan elemen td:

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

Untuk prestasi yang lebih baik, anda masih boleh memilih bentuk yang lebih panjang.

Atas ialah kandungan terperinci Mengapa CSS Tidak Mempunyai Fungsi Pengumpulan Keturunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!