Ucapkan Selamat Tinggal kepada Pemilih Kompleks dengan :where()

Apa itu :where()?

Fikirkan :where() sebagai alat yang berkuasa dalam kotak alat CSS anda yang membolehkan anda mengumpulkan berbilang pemilih ke dalam satu ungkapan ringkas dan ringkas. Ia amat berguna untuk menggunakan gaya pada elemen yang sepadan dengan mana-mana pemilih yang ditentukan, tanpa perlu risau tentang konflik kekhususan.

Sintaks Asas:

element:where(selector1, selector2, ...) {
  /* Styles to be applied */
}

Contoh:
Katakan anda mahu menggayakan semua

elemen yang mempunyai sama ada sorotan kelas atau kelas penting. Anda boleh menggunakan :where() seperti ini:

p:where(.highlight, .important) {
  font-weight: bold;
  color: red;
}

Mengapa Gunakan :where()?

1. Kebolehbacaan yang dipertingkatkan:
   • Menjadikan CSS anda lebih ringkas dan lebih mudah difahami.
2. Kawalan Kekhususan:
   • Membantu anda mengatasi gaya dengan lebih mudah, kerana :where() mempunyai kekhususan sifar.
3. Kebolehselenggaraan Dipertingkat:
   • Dengan mengumpulkan pemilih, anda boleh menjadikan CSS anda lebih modular dan lebih mudah diselenggara.

Contoh Dunia Nyata:
Bayangkan anda mempunyai tapak web dengan bar navigasi. Anda mahu menggayakan pautan navigasi aktif secara berbeza. Anda boleh menggunakan :where() untuk menyasarkan keadaan :hover dan :active:

nav a:where(:hover, :active) {
  background-color: #f0f0f0;
  color: #333;
}

Kesimpulan:
Dengan memahami dan menggunakan :where(), anda boleh menulis kod CSS yang lebih cekap, boleh diselenggara dan elegan. Ia adalah alat yang berharga untuk mana-mana senjata pembangun web.

Memanfaatkan :where() untuk Pemilih Kompleks

Walaupun :where() bagus untuk kumpulan pemilih mudah, ia menjadi lebih berkuasa apabila digunakan dengan pemilih kompleks.

Contoh: Menggayakan Sel Jadual Khusus
Katakan anda ingin menggayakan sel jadual tertentu berdasarkan kandungan dan kedudukannya. Anda boleh menggunakan :where() untuk menggabungkan berbilang pemilih:

table td:where(
  :nth-child(2),
  :contains("Important")
) {
  background-color: yellow;
  font-weight: bold;
}

Kod ini akan menggayakan anak kedua bagi setiap sel jadual, serta mana-mana sel yang mengandungi perkataan "Penting".

Menggabungkan :where() dengan kelas Pseudo Lain

Anda juga boleh menggabungkan :where() dengan kelas pseudo lain untuk mencipta pemilih yang lebih khusus:

a:where(:hover, :focus) {
  text-decoration: underline;
  color: blue;
}

Kod ini akan menggayakan kedua-dua keadaan :hover dan :focus pautan sauh.

Amalan Terbaik untuk Menggunakan :where()

1. Gunakannya dengan bijak: Jangan terlalu menggunakan :where() kerana ia boleh menjadikan CSS anda lebih kompleks untuk dibaca dan diselenggara.
2. Utamakan kekhususan: Walaupun :where() mempunyai kekhususan sifar, masih penting untuk mempertimbangkan kekhususan semasa menulis CSS.
3. Uji dengan teliti: Sentiasa uji CSS anda dalam penyemak imbas yang berbeza untuk memastikan keserasian.

Kesimpulan:
Kelas pseudo :where() ialah alat yang berharga untuk CSS moden. Dengan menguasai penggunaannya, anda boleh menulis kod CSS yang lebih cekap, boleh diselenggara dan elegan.

Atas ialah kandungan terperinci Ucapkan Selamat Tinggal kepada Pemilih Kompleks dengan :where(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!