Kekuatan: mempunyai () dalam CSS

rakan-rakan pemaju, mari kita menyelam ke dunia yang menarik dari CSS

pseudo-class! Walaupun agak baru, :has() telah cepat menjadi kegemaran di kalangan pemaju depan untuk keupayaannya untuk mengawal gaya dengan tepat berdasarkan struktur dalaman elemen. Mari kita meneroka fungsinya dan aplikasi praktikal. :has()

Memahami :has()

The

kelas pseudo elegan gaya elemen hanya jika ia mengandungi unsur-unsur kanak-kanak tertentu. Fikirkannya sebagai gaya bersyarat: "Jika elemen ini mengandungi :has() itu , maka gaya ini elemen."

sintaks:

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

menyelesaikan cabaran gaya biasa

Sebelum ini, menggayakan elemen induk yang hanya berdasarkan kehadiran anak -anaknya memerlukan JavaScript.

Selesai dengan elegan ini. :has()

Pertimbangkan penyenaraian pos blog di mana

(tajuk) mungkin diikuti oleh <h1></h1> (sarikata). Kami mungkin mahu menyerlahkan secara visual <h2></h2> hanya jika <h1></h1> ada secara langsung selepas itu. Sebelum <h2></h2>, ini memerlukan JavaScript. :has()

cara lama (javascript):

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Kod JavaScript ini meleleh melalui

elemen, memeriksa <h1></h1> berikut, dan menambah kelas untuk gaya. <h2></h2>

cara baru (css):

h1:has(+ h2) {
  color: blue;
}

CSS ringkas ini mencapai hasil yang sama dengan menggunakan

dan gabungan saudara bersebelahan (:has()). Ia menggayakan biru hanya jika <h1></h1> segera mengikutinya. <h2></h2>

Contoh Contoh :has() mari kita meneroka beberapa senario di mana

bersinar.

:has()

Contoh 1:

CSS:

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

hanya yang pertama akan menjadi biru kerana ia diikuti dengan

.

h1:has(+ h2) {
  color: blue;
}

<h1></h1> Contoh 2: Imej gaya dengan kapsyen <h2></h2>

Selalunya, kami bekerja dengan imej dan kapsyen. boleh meningkatkan persembahan imej.

:has()

CSS:

<figure>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

gaya ini

hanya jika ia mengandungi .

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

sokongan penyemak imbas dan penggunaan komuniti

<figure></figure> <figcaption></figcaption>

menikmati sokongan luas dalam pelayar moden (periksa caniuse.com untuk maklumat keserasian pelayar terperinci). Maklum balas komuniti mendedahkan kegunaan kreatif, termasuk peningkatan aksesibiliti.

Pertimbangan penting:

• kekhususan: :has() mewarisi kekhususan pemilih dalaman yang paling spesifik.
• Keserasian penyemak imbas: Kegagalan :has() akan melegakan melainkan jika digunakan dalam pemilih pemaafkan seperti :is() atau :where().
• bersarang: :has() tidak boleh bersarang di dalam yang lain :has().
• Pseudo-Elements: Pseudo-elements bukan pemilih yang sah dalam :has().

Kesimpulan:

:has() adalah tambahan yang kuat kepada senjata CSS, membolehkan gaya elegan dan cekap yang sebelum ini bergantung pada JavaScript. Dengan memahami keupayaan dan batasannya, kami dapat meningkatkan kemahiran pembangunan web kami dan mewujudkan kod yang lebih mantap dan boleh dipelihara.

Bacaan Lanjut:

• artikel Isha Deed di: mempunyai ()
• css-tricks on: has ()
• Post Blog Chrome ON: Have ()

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