Pengenalan kepada: mempunyai () pemilih dalam CSS

Artikel ini meneroka pemilih CSS :has(), alat yang berkuasa untuk memilih elemen berdasarkan kandungan mereka. Walaupun agak baru, sokongannya berkembang di seluruh pelayar utama (Safari 15.4, Chromium 105, dan di belakang bendera di Firefox).

gaya pseudo-class

target :has() sasaran elemen-elemen yang dilampirkan-jika syarat-syarat tertentu dalam kurungannya dipenuhi. Ini sama dengan kelas pseudo lain seperti atau :hover. Tidak seperti mereka, bagaimanapun, :active menerima senarai pemilih relatif, membolehkan kriteria pemilihan kompleks. :has()

contohnya,

gaya mana = "Pengenalan kepada: mempunyai () pemilih dalam CSS" /> article:has(img) <article></article> Untuk mensasarkan hanya kanak -kanak langsung, gunakan combinator kanak -kanak: <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907547642572.jpg" class="lazy" alt="An Introduction to the :has() Selector in CSS ">

To target only direct children, use the child combinator: article:has(> img) artikel: mempunyai (& gt; img) . Kekhususan :has() ditentukan oleh pemilih yang paling spesifik dalam kurungannya (mis., :has(#id, p, .class) mewarisi kekhususan pemilih ID).

pemilih saudara juga boleh digunakan dengan :has(). h1:has( h2) Styles An elemen <h1></h1> hanya jika ia secara langsung diikuti oleh elemen <h2></h2>. Kombinator adik -beradik umum (~) membolehkan pemilihan saudara yang lebih luas. Sebagai contoh, ul:has(~ p) Styles A <ul></ul> jika ia mempunyai adik beradik <p></p>

di mana sahaja selepas itu.

Pemilih boleh dirantai untuk membuat dan keadaan. Sebagai contoh, :has() gaya article:has(> img:first-child):has(h1 h2) hanya jika ia mempunyai <article></article> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907548383844.jpg" class="lazy" alt="An Introduction to the :has() Selector in CSS ">

demo codepen yang mempamerkan contoh -contoh ini tersedia. Artikel ini adalah petikan dari yang melepaskan kuasa CSS: Teknik Lanjutan untuk Antara Muka Pengguna Responsif

, tersedia di SitePoint Premium.

Soalan -soalan yang sering ditanya (Soalan Lazim) mengenai CSS: Mempunyai pemilih

(Bahagian ini tetap tidak berubah, kerana ia mencerminkan sokongan penyemak imbas sejarah dan semasa untuk pemilih.) Apakah CSS: mempunyai pemilih dan bagaimana ia berfungsi?

pemilih CSS

adalah alat yang berkuasa yang membolehkan anda memilih elemen berdasarkan anak -anaknya. Ia adalah kelas pseudo relasi, yang bermaksud pemilihan bergantung kepada hubungan antara unsur-unsur.

:has() Bolehkah saya menggunakan CSS: mempunyai pemilih dalam semua penyemak imbas?

Sokongan penyemak imbas untuk

bertambah baik tetapi belum universal. Semak laman web seperti boleh saya gunakan untuk maklumat yang paling terkini.

:has() bagaimana saya boleh menggunakan: mempunyai pemilih dengan jQuery?

Walaupun sokongan penyemak imbas asli berkembang, anda boleh menggunakan

dengan jQuery untuk keserasian yang lebih luas. Sintaks sangat mirip dengan versi CSS.

:has() Apakah perbezaan antara pemilih dan pemilih CSS yang lain?

adalah unik dalam sifat hubungannya; Ia memilih berdasarkan kehadiran elemen kanak -kanak, tidak seperti pemilih yang memberi tumpuan semata -mata pada atribut atau kedudukan.

:has() Adakah terdapat alternatif kepada: mempunyai pemilih?

alternatif termasuk JavaScript atau lebih kompleks kombinasi pemilih CSS yang sedia ada, tetapi ini sering kekurangan keanggunan dan kesimpulan

.

:has() Mengapa pemilih tidak disokong dalam

semua

pelayar? Pada mulanya, kebimbangan prestasi mengenai kelajuan rendering menghalang penggunaan yang meluas. Walau bagaimanapun, sokongan penyemak imbas bertambah baik kerana kebimbangan ini ditangani.

Bolehkah saya menggunakan: mempunyai pemilih dalam fail CSS?

Ya, tetapi hanya dalam penyemak imbas yang menyokongnya.

Apakah sintaks untuk: mempunyai pemilih?

sintaks asas adalah

.

:has(selector) Bolehkah saya menggunakan: mempunyai pemilih dengan pemilih lain?

ya, boleh digabungkan dengan pemilih lain untuk pilihan yang lebih kompleks.

Apakah masa depan: mempunyai pemilih? :has()

Masa depan kelihatan cerah;

menjadi semakin berleluasa apabila sokongan penyemak imbas bertambah baik.

Atas ialah kandungan terperinci Pengenalan kepada: mempunyai () pemilih dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!