Mengapa Saya Tidak Boleh Menyembunyikan Elemen Pseudo Menggunakan Penggabung Adik Beradik dan Bagaimana Saya Boleh Mencapai Ini?

Menyasarkan Pseudo-Elements dengan Sibling Combinators

Dalam percubaan untuk menyembunyikan pseudo-element yang dijana selepas tag anchor tertentu namun mengelakkan imej pembalut tersebut, CSS berikut telah dilaksanakan :

a[href^="http"]:after {
    /* Styling for the pseudo-element */
}

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

Walau bagaimanapun, pendekatan ini gagal pada perkara berikut HTML:

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

Mengapa percubaan ini gagal?

Jawapan:

Mensasarkan elemen pseudo (:selepas) dengan penggabung adik beradik (|) tidak mungkin kerana kandungan elemen pseudo tidak dipaparkan dalam DOM dan tidak memanipulasinya. Oleh itu, CSS tidak boleh mengubah suai DOM untuk menyembunyikan unsur pseudo berdasarkan kehadiran imej adik beradik. Seperti yang dinyatakan dalam spesifikasi CSS2:

"Kandungan yang dijana tidak mengubah pepohon dokumen."

Untuk menyelesaikan isu ini, anda boleh mempertimbangkan untuk menggunakan JavaScript untuk menyembunyikan unsur pseudo secara dinamik berdasarkan kehadiran imej adik beradik.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Menyembunyikan Elemen Pseudo Menggunakan Penggabung Adik Beradik dan Bagaimana Saya Boleh Mencapai Ini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!