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 Olsen
Lepaskan: 2024-12-23 18:55:20
asal
302 orang telah melayarinya

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)

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

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

2. Menu Navigasi Dinamik

Gunakan gaya pada ibu bapa

  • jika ia mengandungi menu lungsur turun.
    li:has(ul) {
      font-weight: bold;
    }
    
    Salin selepas log masuk

    3. Pengesahan Borang

    Serlahkan medan input tidak sah berdasarkan unsur adik beradik atau ibu bapa.

    .form-group:has(input:invalid) {
      border-color: red;
    }
    
    Salin selepas log masuk

    4. Hubungan Adik Beradik Tersuai

    Gayakan elemen berdasarkan adik beradiknya yang bersebelahan.

    h1:has(+ p) {
      margin-bottom: 10px;
    }
    
    Salin selepas log masuk

    Kelebihan :has()

    1. Meningkatkan Kebolehbacaan:

      • Mengurangkan keperluan JavaScript kompleks untuk mengesan dan memanipulasi DOM.
    2. Meningkatkan Prestasi:

      • Ringan dan cekap berbanding dengan penyelesaian JavaScript untuk kesan yang serupa.
    3. 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!

  • 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