Cara Menyasarkan Keturunan dengan Cekap dalam CSS: Adakah Terdapat Cara yang Lebih Baik Daripada Penyenaraian Individu?

Pengumpulan Keturunan Sukar dalam CSS

Dalam dunia HTML dan CSS, elemen penggayaan selalunya merupakan tugas yang memerlukan ketepatan dan kecekapan. Walau bagaimanapun, apabila ia datang untuk menggayakan sekumpulan keturunan, kekurangan sintaks yang jelas boleh menjadi punca kekecewaan.

Pertimbangkan senario berikut: anda mempunyai jadual HTML dengan berbilang lajur dan baris dan anda mahu untuk menetapkan gaya yang sama kepada semua tajuk lajur (th) dan sel jadual (td). Mengapa anda tidak boleh menggunakan pemilih seperti #myTable (th,td) untuk mencapai matlamat ini?

Jawapannya terletak pada sintaks CSS itu sendiri. Sehingga baru-baru ini, CSS tidak menyediakan cara yang jelas untuk mengumpulkan keturunan dalam pemilih. Sebaliknya, ia memerlukan anda untuk menyenaraikan setiap keturunan secara eksplisit, seperti dalam #myTable th, #myTable td.

Namun, keinginan untuk cara yang lebih ringkas dan cekap untuk mengumpulkan keturunan telah membawa kepada cadangan dan pelaksanaan pseudo terbaru. -kelas. Mozilla memperkenalkan :-moz-any() pada tahun 2010, diikuti dengan WebKit's :-webkit-any(). Walaupun kelas pseudo awalan ini boleh menyediakan kefungsian pengelompokan yang diingini, penggunaannya terhad kerana keperluan untuk kod khusus vendor dan potensi pertindihan set peraturan.

Usaha terkini untuk menangani isu ini ialah cadangan :matches () pseudo-class dalam draf kerja tahap 4 Selectors. Kelas pseudo baharu ini menawarkan penambahbaikan ke atas cadangan :any() dan mungkin menyediakan penyelesaian piawai untuk mengelompokkan keturunan. Walau bagaimanapun, sokongan untuk :matches() masih terhad.

Sementara itu, jika menggayakan kedua-dua elemen th dan td adalah matlamat anda, anda boleh menggunakan #myTable tr > * dengan mengandaikan tiada unsur anak tambahan dalam baris jadual. Alternatif ini menghapuskan keperluan untuk menyenaraikan keturunan secara individu, memberikan pendekatan yang lebih cekap dan boleh dibaca.

Atas ialah kandungan terperinci Cara Menyasarkan Keturunan dengan Cekap dalam CSS: Adakah Terdapat Cara yang Lebih Baik Daripada Penyenaraian Individu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!