Bolehkah Sibling Combinators Pilih :sebelum atau :selepas Pseudo-elements dalam CSS?

Bolehkah Sibling Combinators Menyasarkan :sebelum atau :selepas Pseudo-Elements?

Dalam CSS, sibling combinator digunakan untuk menggunakan gaya pada elemen yang berkongsi induk yang sama tetapi tidak bersarang di antara satu sama lain. Walau bagaimanapun, bolehkah penggabung ini digunakan untuk menyasarkan elemen pseudo, seperti :sebelum dan :selepas?

Cabaran

Pertimbangkan CSS dan HTML berikut kod:

CSS:

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

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

HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

Niat

CSS ini bertujuan untuk menambah penanda merah pada sauh yang bermula dengan "http", tetapi ia tidak sepatutnya menambah penanda pada sauh yang mengandungi imej. Memandangkan tag anchor tidak boleh disasarkan secara langsung menggunakan elemen img, hipotesis bahawa penggabung adik-beradik boleh menyasarkan elemen pseudo-pseudo tag anchor yang mempunyai adik-beradik imej.

Isunya

Walau bagaimanapun, CSS ini tidak berfungsi seperti yang dimaksudkan. Unsur pseudo tidak disembunyikan untuk sauh yang mengandungi imej.

Penjelasan

Sebab kelakuan ini terletak pada sifat unsur pseudo. Pseudo-elemen bukan sebahagian daripada pepohon DOM dan dijana oleh penyemak imbas. Akibatnya, penggabung saudara tidak boleh menyasarkannya secara langsung.

Spesifikasi CSS menyatakan: "Kandungan yang dijana tidak mengubah pepohon dokumen. Khususnya, ia tidak disalurkan kembali kepada pemproses bahasa dokumen (cth., untuk pengubahsuaian )."

Penyelesaian

Untuk mencapai kesan yang diingini, JavaScript mesti bekerja. Skrip boleh berulang melalui tag anchor dan menambah atau mengalih keluar gaya yang diingini berdasarkan kandungan imejnya.

Atas ialah kandungan terperinci Bolehkah Sibling Combinators Pilih :sebelum atau :selepas Pseudo-elements dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!