Rumah > hujung hadapan web > tutorial css > Pemilih CSS: Membuka Kunci Pemilih Lanjutan untuk Reka Bentuk Web Moden

Pemilih CSS: Membuka Kunci Pemilih Lanjutan untuk Reka Bentuk Web Moden

Mary-Kate Olsen
Lepaskan: 2024-11-27 13:42:11
asal
224 orang telah melayarinya

Hei semua! Selamat datang ke blog saya. ?

pengenalan

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.

? :is() Pemilih

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; }

Salin selepas log masuk

Hasil: Semua jenis makluman mendapat fon tebal dan jidar, dengan warna ditakrifkan oleh kelas khusus mereka.

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

?Petua: Anda boleh salin-tampal semua contoh pada Codepen, untuk melihat keputusan dalam tindakan.

? Pemilih :where()

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;
}
Salin selepas log masuk

Keputusan:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

? The :not() Pemilih

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;
}

Salin selepas log masuk

Keputusan:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

? The :has() Pemilih

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; }

Salin selepas log masuk
<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;
}
Salin selepas log masuk

Keputusan:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

Sokongan Penyemak Imbas

  • :is() dan :where(): Penyemak imbas moden biasanya menyokong ini, tetapi sentiasa menyemak data keserasian terkini.
  • :not(): Disokong secara meluas, tetapi pemilih kompleks di dalam :not() mungkin tidak berfungsi dalam penyemak imbas lama.
  • :has(): Terhad kepada versi terbaru Safari dengan sokongan percubaan dalam penyemak imbas lain. Gunakan dengan berhati-hati atau gunakan polyfill untuk keserasian yang lebih luas.

Pertimbangan Kekhususan

  • :is() dan :where() mewarisi kekhususan tertinggi daripada pemilih yang terkandung di dalamnya, dengan :where() mempunyai kekhususan sifar itu sendiri.
  • :not() adalah kekhususan pemilih yang terkandung di dalamnya.
  • :has() boleh membawa kepada isu kekhususan yang kompleks kerana ia bergantung pada pemilih di dalamnya, tetapi ia tidak secara langsung menambah skor kekhususan.

Amalan Terbaik untuk Menggunakan Pemilih Terperinci

  • Gunakan untuk DRY CSS : Pemilih ini mengurangkan pengulangan, menjadikan CSS anda lebih mudah diselenggara.
  • Pertimbangkan Prestasi : Pemilih kompleks boleh memberi kesan kepada prestasi, terutamanya yang bersarang.
  • Sandaran untuk Penyemak Imbas Lama : Apabila menggunakan :has(), pastikan anda mempunyai sandaran atau gunakan Pertanyaan Ciri dengan @sokongan.
  • Elakkan Penggunaan Berlebihan : Walaupun berkuasa, jangan terlalu merumitkan pemilih anda, kerana kebolehbacaan adalah kuncinya.

Aplikasi Praktikal

  • 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.

Kesimpulan

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan