为什么我不能使用同级组合器隐藏伪元素以及如何实现这一点？

使用同级组合器定位伪元素

为了隐藏在特定锚标记后生成的伪元素，但避免那​​些包装图像，实现了以下 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中文网其他相关文章！