CSS: mempunyai pemilih (dan 4 contoh)

CSS :has() pemilih merevolusikan pemilihan elemen dengan mensasarkan ibu bapa berdasarkan sifat anak -anak mereka. Ia lebih daripada sekadar "pemilih ibu bapa" -it menawarkan keupayaan gaya bersyarat yang kuat. Contohnya, anda boleh gaya<div> elemen hanya jika mereka mengandungi a<code><p> :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Div: mempunyai (p) { Latar Belakang: Merah; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> <p> Walaupun sebelum ini tidak disokong <code>:has() kini mendapat daya tarikan, muncul dalam Pratonton Teknikal Safari 137.

Mari kita meneroka senario lain: Menambah jarak selepas tajuk, tetapi menyesuaikan jarak jika sari kata hadir:

 H2,
.subtitle {
  Margin: 0 0 1.5rem 0;
}
.Header-Group: mempunyai (H2): mempunyai (.subtitle) H2 {
  margin: 0 0 0.2rem 0; / * Mengurangkan jarak disebabkan oleh sarikata */
}

Perhatikan chaining of :has() pemilih: .header-group:has(h2):has(.subtitle) . Ini berbeza daripada menggunakan senarai pemilih dalam :has() , seperti .header-group:has(h2 .subtitle) . Pendekatan rantaian memilih<h2></h2> hanya jika .header-group mengandungi kedua-dua<h2></h2> dan a .subtitle . Pendekatan senarai pemilih, bagaimanapun, mempunyai logik pemilihan yang berbeza.

Pertimbangkan :has() sebagai pemilih ibu bapa pseudo-kelas. Ia membolehkan unsur-unsur induk gaya yang bersesuaian berdasarkan anak-anak mereka, pemergian yang signifikan dari pendekatan atas ke bawah CSS tradisional. Keupayaan ini membuka banyak kemungkinan sebelum ini tidak dapat dicapai dengan CSS sahaja.

Pautan gaya yang mengandungi imej:

 A: mempunyai (> img) {
  Sempadan: 20px Pepejal Putih;
}

> img memastikan imej adalah anak langsung dari<a></a> . :has() juga boleh digunakan untuk margin/padding bersyarat berdasarkan kandungan.

:has() adalah sebahagian daripada pemilih CSS Level 4, di samping berguna :not kelas pseudo. Ia jauh lebih kuat daripada pemilih ibu bapa yang mudah; Ia membolehkan memilih elemen kanak -kanak berdasarkan kandungan ibu bapa. Contohnya:

 /* Gaya elemen dengan a<figcaption> anak */
Rajah: mempunyai (figcaption) {...}

/* Gaya<img  alt="CSS: mempunyai pemilih (dan 4 contoh)" > dalam a<figure> mengandungi a<figcaption> */
Rajah: mempunyai (figcaption) img {...}</figcaption></figure></figcaption>

Senarai Chaining dan Selector disokong:

 Artikel: mempunyai (h2): mempunyai (ul) {...} // dirantai
Artikel: mempunyai (h2, ul) {...} // senarai pemilih

Walau bagaimanapun, sedar bahawa pemilih yang tidak sah dalam senarai akan membatalkan keseluruhan :has() pemilih. Gunakan :where() atau :is() untuk pengendalian yang lebih mantap pemilih yang berpotensi tidak sah.

Ujian untuk sokongan:

 @Supports (pemilih (: mempunyai (p))) {
  /* Disokong! */
}

The :not() pemilih, juga dari CSS Selectors Level 4, menawarkan sokongan penyemak imbas yang sangat baik dan kebolehbacaan yang lebih baik:

 ul li: tidak (: jenis pertama) {
  warna: merah;
}

Gaya ini semua item senarai kecuali yang pertama. Teknik yang sama boleh digunakan untuk margin:

 ul li: tidak (: jenis terakhir) {
  Margin-Bottom: 20px;
}

CSS Selectors Level 4 juga termasuk :is() , menawarkan alternatif ringkas kepada pemilih yang panjang:

 : adalah (seksyen, artikel, selain, nav): adalah (H1, H2, H3, H4, H5, H6) {
  Warna: #Bada55;
}

Ringkasnya :has() , bersama -sama dengan :is() dan :not() , menyediakan cara yang kuat dan boleh dibaca untuk elemen gaya berdasarkan hubungan kompleks dalam DOM.

Bacaan lanjut:

• Adrian Bece - Bertemu :has() , pemilih ibu bapa CSS asli (dan banyak lagi)
• Bramus Van Damme - The CSS :has() pemilih adalah cara lebih daripada "pemilih ibu bapa"
• Michelle Barker - :has() telah mendarat di Safari

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