為什麼我不能使用同級組合器隱藏偽元素以及如何實現這一點？

使用同級組合器定位偽元素

為了隱藏在特定錨標記後生成的偽元素，但避免那​​些包裝圖像，實現了以下CSS :

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

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>

為什麼此嘗試失敗？

答案：

使用同級組合器定位偽元素(:after) (|) 是不可能的，因為偽元素的內容不會在DOM 中呈現並且不會對其進行操作。因此，CSS 無法根據同級影像的存在修改 DOM 以隱藏偽元素。如 CSS2 規格所述：

「產生的內容不會改變文件樹。」

要解決此問題，可以考慮使用 JavaScript 根據存在同級圖像。

以上是為什麼我不能使用同級組合器隱藏偽元素以及如何實現這一點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！