Bolehkah Sibling Combinators Menyasarkan Pseudo-elemen dalam CSS?

Penggabung Adik Beradik dan Elemen Pseudo: Had Penyasaran

Bolehkah elemen pseudo disasarkan menggunakan penggabung adik beradik? Isu CSS baru-baru ini telah mencetuskan persoalan ini.

Dalam senario ini, tag anchor dengan imej terdahulu tidak seharusnya memaparkan unsur pseudo. Menyasarkan sauh secara langsung tidak dapat dilaksanakan kerana kehadiran imej. Oleh itu, pendekatan alternatif menggunakan penggabung bersaudara pada elemen pseudo telah dicuba, seperti yang ditunjukkan di bawah:

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

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

Walau bagaimanapun, CSS gagal menyembunyikan elemen pseudo apabila tag anchor melampirkan imej. Mengapa demikian?

Keterbatasan terletak pada sifat unsur pseudo. Kandungan yang dijana, termasuk unsur pseudo, tidak disertakan dalam DOM dan tidak menjejaskan dokumen asal. Ini dinyatakan secara eksplisit dalam spesifikasi CSS:

"Kandungan yang dijana tidak mengubah pepohon dokumen. Khususnya, ia tidak disalurkan semula kepada pemproses bahasa dokumen (mis., untuk pengulangan)."

Oleh itu, penggabung saudara tidak boleh menyasarkan elemen pseudo :sebelum atau :selepas kerana mereka bukan sebahagian daripada DOM struktur.

Untuk senario yang serupa, pertimbangkan untuk menggunakan JavaScript untuk memanipulasi DOM secara dinamik dan mencapai kesan penggayaan yang diingini.

Atas ialah kandungan terperinci Bolehkah Sibling Combinators Menyasarkan Pseudo-elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!