Rumah >hujung hadapan web >tutorial css >CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik
CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik
- Mary-Kate Olsenasal
- 2024-12-23 18:55:20292semak imbas
CSS terus berkembang untuk membolehkan pembangun membina halaman web yang dinamik, intuitif dan menarik secara visual dengan mudah. Satu peningkatan tersebut ialah :has() pseudo-class, yang diperkenalkan dalam CSS moden. Kelas pseudo ini membawa keupayaan pemilihan sedar ibu bapa, membolehkan anda menggunakan gaya secara bersyarat berdasarkan kehadiran atau keadaan elemen kanak-kanak atau adik-beradik.
Artikel ini menerangkan kelas pseudo :has() dengan contoh untuk menunjukkan fleksibiliti dan kuasanya.
Apakah itu :has() Pseudo-Class?
Kelas pseudo :has() sering dirujuk sebagai "pemilih ibu bapa" kerana ia membolehkan anda menggayakan elemen berdasarkan anak, adik beradik atau keturunannya.
selector:has(selectorList)
- pemilih ialah elemen utama yang digunakan oleh peraturan.
- selectorList ialah syarat, yang boleh termasuk kanak-kanak, adik beradik atau elemen lain yang berkaitan dengan elemen utama.
Ciri Utama
- Kesedaran ibu bapa: Gaya digunakan pada elemen berdasarkan keturunan atau adik-beradiknya.
- Keadaan fleksibel: Berfungsi dengan penggabung seperti , ~ dan > untuk perhubungan adik beradik dan anak.
- Interativiti yang dipertingkatkan: Berguna untuk mencipta reka letak atau kesan dinamik tanpa bergantung pada JavaScript.
Contoh Praktikal: Menggunakan :has() untuk Menggayakan Kotak Berdasarkan Adik Beradiknya
body {
font-family: sans-serif;
}
.box {
width: 50px;
height: 40px;
background-color: red;
margin: 5px;
}
.border {
border: 2px solid black;
}
.circle {
width: 40px;
height: 40px;
background-color: blue;
border-radius: 25px;
}
/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS :has() Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div>
<p><strong>Explanation</strong></p>
<p><em>Basic Styles</em><br>
The .box class defines small red rectangles with a margin.<br>
The .circle class creates blue circular elements.</p>
<p>Dynamic Sizing Using :has():<br>
The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>
<p><em>Visual Output</em></p>
<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling" /></p>
<h2>
Use Cases for :has()
</h2>
<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
1. <strong>Interactive Layouts</strong>
</h3>
<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>
<pre class="brush:php;toolbar:false">.card:has(button) {
border: 2px solid green;
}
2. Menu Navigasi Dinamik
Gunakan gaya pada ibu bapa
li:has(ul) {
font-weight: bold;
}
3. Pengesahan Borang
Serlahkan medan input tidak sah berdasarkan unsur adik beradik atau ibu bapa.
.form-group:has(input:invalid) {
border-color: red;
}
4. Hubungan Adik Beradik Tersuai
Gayakan elemen berdasarkan adik beradiknya yang bersebelahan.
h1:has(+ p) {
margin-bottom: 10px;
}
Kelebihan :has()
-
Meningkatkan Kebolehbacaan:
- Mengurangkan keperluan JavaScript kompleks untuk mengesan dan memanipulasi DOM.
-
Meningkatkan Prestasi:
- Ringan dan cekap berbanding dengan penyelesaian JavaScript untuk kesan yang serupa.
-
Memudahkan CSS:
- Mendayakan penggayaan deklaratif untuk perhubungan yang kompleks, meminimumkan kelas atau atribut tambahan.
Sokongan Pelayar
Setakat ini, kelas pseudo :has() disokong oleh kebanyakan penyemak imbas moden, termasuk:
- Chrome: 105
- Tepi: 105
- Safari: 15.4
- Firefox: Sokongan sedang dipertimbangkan.
Untuk penyemak imbas lama, anda mungkin memerlukan sandaran atau polyfill.
Kesimpulan
Kelas pseudo :has() ialah penukar permainan dalam CSS moden, membawa keupayaan pemilih induk yang telah lama ditunggu-tunggu. Dengan keupayaannya untuk menggayakan elemen secara bersyarat berdasarkan perhubungannya, ia memudahkan kod CSS, meningkatkan penggayaan dinamik dan mengurangkan pergantungan pada JavaScript untuk manipulasi DOM.
Teroka kelas pseudo :has() dalam projek anda dan buka kunci kemungkinan baharu untuk reka bentuk web yang kreatif dan cekap!
Atas ialah kandungan terperinci CSS :has() Pseudo-Class: Pemilih Berkuasa untuk Penggayaan Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!