Hei semua! Selamat datang ke blog saya. ?
Hari ini, kami menyelami dunia pemilih CSS lanjutan. Pemilih ini, seperti :is(), :where(), :not(), dan :has(), mungkin kelihatan agak rumit pada mulanya disebabkan oleh peraturan kekhususannya atau isu sokongan penyemak imbas, tetapi ia adalah alat yang sangat berkuasa untuk mencipta CSS yang lebih cekap dan dinamik. Mari kita terokai pemilih ini bersama-sama, fahami cara ia berfungsi, lihat mereka dalam tindakan dan bincangkan beberapa nuansa tambahan.
Apa yang Anda Akan Pelajari dalam Artikel Ini
Memahami Setiap Pemilih : Memecahkan :is(), :where(), :not(), dan :has().
Sokongan Penyemak Imbas : Mengetahui penyemak imbas yang menyokong pemilih ini.
Cerapan Kekhususan : Cara pemilih ini mempengaruhi aplikasi peraturan CSS.
Contoh Praktikal : Kes penggunaan dunia sebenar untuk menunjukkan cara pemilih ini boleh memudahkan CSS anda.
Amalan Terbaik : Petua untuk menggunakan pemilih ini dengan berkesan.
Apa itu :is() ?
Fungsi kelas pseudo :is() membenarkan anda menggunakan gaya pada berbilang pemilih tanpa mengulangi sifat yang sama. Ia amat berguna untuk mengumpulkan pemilih dengan kekhususan yang berbeza.
Contoh:
<div> <pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) { font-weight: bold; border: 1px solid; border-radius: 4px; } .alert.success { border-color: green; } .alert.error { border-color: red; } .alert.warning { border-color: orange; }
Hasil: Semua jenis makluman mendapat fon tebal dan jidar, dengan warna ditakrifkan oleh kelas khusus mereka.
?Petua: Anda boleh salin-tampal semua contoh pada Codepen, untuk melihat keputusan dalam tindakan.
Apa itu :where() ?
Serupa dengan pemilih kumpulan :is(), :where() tetapi ia mempunyai kekhususan 0, menjadikannya ideal untuk mencipta gaya yang mudah ditindih.
Contoh:
<button> <pre class="brush:php;toolbar:false">/* Button styles with low specificity */ :where(button, input[type="button"], input[type="submit"]) { font-size: 1rem; padding: 0.5em 1em; background-color: #f0f0f0; border: none; cursor: pointer; } /* Specific override for primary buttons */ button.primary { background-color: #007BFF; color: white; }
Keputusan:
Apa itu :not() ?
Kelas pseudo :not() digunakan untuk mengecualikan elemen tertentu daripada pilihan. Ia bagus untuk menggunakan gaya pada semua perkara kecuali elemen atau kelas tertentu.
Contoh:
<ul> <li> <pre class="brush:php;toolbar:false">/* Style all list items except those marked as 'done' */ li:not(.done) { background-color: #f0f0f0; } /* Darken the text for completed items */ li.done { color: #888; }
Keputusan:
Apa itu :has() ?
Kelas pseudo :has() membolehkan anda menggayakan elemen berdasarkan kandungannya. Pemilih ini sangat berkuasa tetapi mempunyai sokongan penyemak imbas terhad pada masa penulisan.
Contoh:
<div> <pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) { font-weight: bold; border: 1px solid; border-radius: 4px; } .alert.success { border-color: green; } .alert.error { border-color: red; } .alert.warning { border-color: orange; }
<button> <pre class="brush:php;toolbar:false">/* Button styles with low specificity */ :where(button, input[type="button"], input[type="submit"]) { font-size: 1rem; padding: 0.5em 1em; background-color: #f0f0f0; border: none; cursor: pointer; } /* Specific override for primary buttons */ button.primary { background-color: #007BFF; color: white; }
Keputusan:
Komponen Penggayaan : Gunakan :is() dan :where() untuk gaya biasa merentas kelas butang atau elemen bentuk yang berbeza.
Reka Letak Dinamik : :has() boleh digunakan untuk reka letak adaptif di mana kehadiran elemen tertentu mengubah gaya induk.
Reka Bentuk Responsif : Gabungkan pemilih ini dengan pertanyaan media untuk reka bentuk yang lebih dinamik dan sedar konteks.
Pemilih CSS lanjutan boleh menyelaraskan helaian gaya anda, menjadikannya lebih bersih dan lebih cekap. Pantau sokongan penyemak imbas, terutamanya untuk :has(), dan gunakan pemilih ini dengan bijak untuk meningkatkan CSS anda tanpa mengorbankan kebolehselenggaraan.
Selamat pengekodan, dan semoga CSS anda selektif seperti yang diperlukan! ?
? Helo, saya Eleftheria, Pengurus Komuniti, pembangun, penceramah awam dan pencipta kandungan.
? Jika anda menyukai artikel ini, pertimbangkan untuk berkongsinya.
? Semua pautan | X | LinkedIn
Atas ialah kandungan terperinci Pemilih CSS: Membuka Kunci Pemilih Lanjutan untuk Reka Bentuk Web Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!