Bolehkah Sibling Combinators Menyasarkan unsur Pseudo seperti :sebelum atau :selepas?

Penggabung Adik Beradik dan Elemen Pseudo

Dalam kebingungan CSS ini, kami menghadapi persoalan sama ada mungkin untuk menyasarkan elemen pseudo, khususnya :sebelum atau :selepas, menggunakan penggabung saudara.

Pertimbangkan perkara berikut CSS:

a[href^="http"]:after {
  content:"";
  width:10px;
  height:10px;
  display:inline-block;
  background-color:red;
}

a[href^="http"] img ~ :after {
  display:none;
}

Dan HTML seterusnya:

<a href="http://google.com">Test</a>
<a href="http://google.com">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="Bolehkah Sibling Combinators Menyasarkan unsur Pseudo seperti :sebelum atau :selepas?" >
</a>

Niatnya adalah untuk menggunakan elemen pseudo pada semua tag anchor yang sepadan, kecuali yang mengandungi imej. Walau bagaimanapun, CSS gagal berfungsi seperti yang diharapkan.

Jawapannya terletak pada sifat unsur pseudo. Menurut spesifikasi CSS, kandungan yang dijana daripada unsur pseudo tidak menjejaskan struktur DOM. Ini bermakna penggabung bersaudara, yang bergantung pada elemen yang terdapat dalam pepohon DOM, tidak boleh menyasarkan elemen pseudo.

Dalam erti kata lain, CSS cuba menyembunyikan elemen pseudo :selepas pada tag anchor yang berkongsi ibu bapa dengan imej. Walau bagaimanapun, oleh kerana :after pseudo-element tidak dipaparkan ke dalam DOM, adalah mustahil untuk adik beradik combinator untuk mengesannya.

Akibatnya, JavaScript selalunya merupakan penyelesaian yang lebih sesuai untuk elemen penyasaran berdasarkan elemen tersebut. perhubungan dengan elemen lain dalam DOM.

Atas ialah kandungan terperinci Bolehkah Sibling Combinators Menyasarkan unsur Pseudo seperti :sebelum atau :selepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!