Huraikan `: mempunyai ()` pseudo-class (pemilih induk)
The: mempunyai () kelas pseudo dalam CSS membolehkan menargetkan elemen induk berdasarkan unsur-unsur anaknya. Ia berfungsi dengan menggunakan ibu bapa sintaks: mempunyai (pemilih kanak-kanak) untuk memohon gaya yang bersesuaian. Sebagai contoh, Div: Has (IMG) menggunakan gaya ke Div yang mengandungi imej. Pelbagai pemilih boleh digunakan dengan koma seperti div: mempunyai (IMG, P.Special). Kes penggunaan biasa termasuk bekas gaya, maklum balas pengesahan bentuk, dan menunjukkan item menu dengan submenus. Sokongan penyemak imbas boleh didapati dalam pelayar moden seperti Chrome, Safari, dan Edge, walaupun Firefox tidak mempunyai sokongan pada akhir tahun 2024. Pertimbangan termasuk kesan prestasi, tingkah laku bukan dinamik, dan keperluan untuk kejatuhan dalam persekitaran yang tidak disokong.
The :has() kelas pseudo adalah pemilih CSS yang kuat yang membolehkan anda menyasarkan elemen induk berdasarkan kehadiran unsur atau syarat kanak-kanak tertentu di dalamnya. Sebelum :has() diperkenalkan, tidak ada cara asli dalam CSS untuk memilih ibu bapa berdasarkan anak -anaknya - pemaju terpaksa bergantung kepada JavaScript atau menambah kelas tambahan secara manual. Sekarang, dengan :has() , ini menjadi mungkin menggunakan hanya CSS.
Cara Menggunakan :has() dalam CSS
:has() berfungsi dengan mengambil pemilih sebagai hujah dan memadankan mana -mana elemen yang mengandungi sekurang -kurangnya satu elemen yang sepadan di dalamnya. Sintaks kelihatan seperti:
Ibu bapa: mempunyai (kanak-kanak-selektor) {
/ * gaya */
} Sebagai contoh, jika anda ingin gaya <div> hanya apabila ia mengandungi <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251076578590.jpeg" class="lazy" alt="Huraikan `: mempunyai ()` pseudo-class (pemilih induk)" > , anda boleh menulis:
div: mempunyai (img) {
Sempadan: 2px hijau pepejal;
} Ini akan memohon sempadan hanya untuk unsur -unsur div yang secara langsung mengandungi tag imej di suatu tempat di dalamnya.
Anda juga boleh mengikat pelbagai pemilih di dalam :has() menggunakan koma, seperti:
Div: mempunyai (IMG, P.Special) {
latar belakang warna: #f0f0f0;
} Peraturan ini akan sepadan dengan mana -mana div yang mempunyai img dan A p dengan kelas special .
Kes penggunaan biasa untuk :has()
- Container Styling Secara Kondisi : Sebagai contoh, memohon padding atau margin yang berbeza ke susun atur kad hanya apabila ia termasuk video.
- Maklumbalas Pengesahan Borang : Menonjolkan kumpulan borang apabila input yang diperlukan tidak sah.
- Item Menu dengan Submenus : Memohon anak panah atau penunjuk hanya untuk item menu yang mempunyai senarai bersarang.
Inilah contoh dunia nyata:
li: mempunyai (ul) {
Kedudukan: Relatif;
Padding-Right: 20px;
}
li: mempunyai (ul) :: selepas {
Kandungan: '▾';
Kedudukan: Mutlak;
Kanan: 5px;
} Ini menambah penunjuk dropdown ke mana -mana item senarai yang mengandungi submenu ( <ul></ul> ), menjadikan UI navigasi anda lebih intuitif tanpa menambah markup tambahan.
Sokongan dan pertimbangan penyemak imbas
Sehingga kini :has() disokong dalam pelayar yang paling moden seperti Chrome (V105), Safari (v15.4), dan Edge (V106). Sokongan Firefox masih belum selesai pada akhir tahun 2024, jadi penting untuk memeriksa keserasian jika anda menyasarkan penonton yang luas.
Juga, perlu diingat:
-
:has()boleh menjejaskan prestasi jika digunakan secara berlebihan atau dengan pemilih yang kompleks. - Ia tidak dinamik dengan cara yang sama JavaScript adalah - ia hanya menilai pada masa yang diberikan.
- Elakkan menggunakannya dalam susun atur kritikal melainkan penandaan disediakan untuk penyemak imbas yang tidak disokong.
Jika anda menggunakannya dalam pengeluaran, pertimbangkan pengesanan ciri atau strategi peningkatan progresif untuk memastikan tapak anda tetap boleh digunakan di mana -mana.
Pada asasnya :has() memberikan CSS alat yang hilang panjang untuk gaya bersyarat berdasarkan struktur. Walaupun ia belum disokong secara universal, ia pasti bernilai bereksperimen dengan dan merancang untuk kegunaan masa depan.
Atas ialah kandungan terperinci Huraikan `: mempunyai ()` pseudo-class (pemilih induk). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara menukar gaya senarai dalam css
Aug 17, 2025 am 10:04 AM
Untuk menukar gaya senarai CSS, gunakan jenis gaya pertama untuk menukar gaya peluru atau penomboran. 1. Gunakan jenis gaya senarai untuk menetapkan peluru UL ke cakera, bulatan atau persegi, dan bilangan OL adalah perpuluhan, rendah alpha, atas-alpha, rendah-Rom atau atas-Rom. 2. Keluarkan tag sepenuhnya dengan gaya senarai: Tiada. 3. Gunakan senarai gaya senarai: URL ('Bullet.png') untuk menggantikannya dengan imej tersuai. 4. Gunakan senarai gaya senarai: dalam
Cara membuat gelangsar testimoni responsif dengan CSS
Aug 12, 2025 am 09:42 AM
Adalah mungkin untuk membuat slider karusel automatik yang responsif dengan CSS tulen, hanya menggabungkan struktur HTML, susun atur flexbox, dan animasi CSS. 2. Pertama membina bekas HTML semantik yang mengandungi pelbagai syarat cadangan, setiap .Item mengandungi kandungan rujukan dan maklumat pengarang. 3. Gunakan bekas induk untuk menetapkan paparan: flex, lebar: 300% (tiga slaid) dan gunakan limpahan: tersembunyi untuk mencapai susunan mendatar. 4. Gunakan @KeyFrames untuk menentukan transformasi translatex dari 0% hingga -100%, dan menggabungkan animasi: scroll15slinearinfinite untuk mencapai tatal automatik lancar. 5. Tambah media
Cara membuat sempadan bertitik di CSS
Aug 15, 2025 am 04:56 AM
Gunakan CSS untuk membuat sempadan bertitik, hanya tetapkan atribut sempadan untuk bertitik. Sebagai contoh, "Sempadan: 3PXDotted#000" boleh menambah sempadan titik hitam 3-pixel ke elemen. Dengan menyesuaikan lebar sempadan, saiz titik boleh diubah. Sempadan yang lebih luas menghasilkan mata yang lebih besar. Anda boleh menetapkan sempadan bertitik untuk sisi tertentu, seperti "Border-top: 2PxDotteded". Sempadan bertitik sesuai untuk elemen peringkat blok seperti div dan input. Mereka sering digunakan dalam keadaan fokus atau kawasan yang boleh diedit untuk meningkatkan kebolehcapaian. Perhatikan kontras warna. Pada masa yang sama, berbeza dengan gaya garis pendek Dashed, bertitik membentangkan bentuk titik bulat. Ciri ini digunakan secara meluas dalam semua pelayar arus perdana.
Cara menggunakan kecerunan CSS untuk latar belakang
Aug 17, 2025 am 08:39 AM
CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo
Cara Membuat Kesan Glassmorfisme Dengan CSS
Aug 22, 2025 am 07:54 AM
Untuk membuat kesan meniru kaca CSS, anda perlu menggunakan penapis latar belakang untuk mencapai latar belakang kabur, menetapkan latar belakang lut seperti RGBA (255,255,255,0.1), tambah sempadan halus dan bayang-bayang untuk meningkatkan rasa hierarki, dan pastikan terdapat kandungan visual yang cukup di belakang unsur-unsur; 1. Gunakan penapis latar belakang: blur (10px) untuk mengaburkan kandungan latar belakang; 2. Gunakan RGBA atau HSLA untuk menentukan latar belakang telus untuk mengawal tahap ketelusan; 3. Tambah 1PxSolidrgba (255,255,255,0.3) sempadan dan bayang-bayang kotak untuk meningkatkan tiga dimensi; 4. Pastikan bekas mempunyai latar belakang yang kaya seperti gambar atau tekstur untuk membentangkan kesan penembusan kabur; 5. Ia serasi dengan pelayar lama
Cara menukar kursor dalam CSS
Aug 16, 2025 am 05:00 AM
UseBuilt-IncursortypesLikePointer, Bantuan, Ornot-AllowedtoprovideimmediatevisualFeedBackFordifferentInteractivements.2.applycustomcursorimageswithTheCursorPropertyuseSaurl, OptionallySpecyfyLySpotandingLudinglikeAtoToAllik.
Cara Menggunakan GRID-Template-areas di CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areaspropertyallowsdeveloperstercreateintuitive, readableLelayoutsbydefiningnamedgridareas; eachstringRepresentowandeachwordacolumncell, withgrid-areanamesonchildelementsmatchingthoseIntHetHetPlate, sedemikian "headerheaderererheaderererheadererheadererheadererheadererheadererheadererheadererheadererheadererheaderheaderheadererheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader."
Cara Menambah Bayang Kotak di CSS
Aug 18, 2025 am 11:39 AM
Untuk menambah bayang-bayang kotak, gunakan atribut box-shadow; 1. Sintaks asas adalah badai kotak: mendatar mengimbangi vertikal offset blur radius pengembangan radius bayang-bayang dalam warna; 2. Tiga nilai pertama diperlukan, selebihnya adalah pilihan; 3. Gunakan RGBA () atau HSLA () untuk mencapai kesan telus; 4. Radius pengembangan positif memperluaskan bayang -bayang dan nilai negatif dikurangkan; 5. Pelbagai bayang -bayang boleh ditambah dengan pemisahan koma; 6. Berlebihan harus dielakkan untuk memastikan penglihatan diuji pada latar belakang yang berlainan; Atribut ini disokong dengan baik oleh penyemak imbas, dan penggunaan yang munasabah dapat meningkatkan tekstur reka bentuk.
