同级组合器可以在 CSS 中选择 :before 或 :after 伪元素吗？

同级组合器可以定位 :before 或 :after 伪元素吗？

在 CSS 中，同级组合器用于将样式应用于以下元素：共享同一个父对象，但不相互嵌套。但是，这些组合器是否可以用于定位伪元素，例如 :before 和 :after？

挑战

考虑以下 CSS 和 HTML code:

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="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="同级组合器可以在 CSS 中选择 :before 或 :after 伪元素吗？" >
</a>

意图

此 CSS 旨在添加红色标记以“http”开头的锚点，但不应将标记添加到包含图像的锚点。由于无法使用 img 元素直接定位锚标记，因此假设同级组合器可以定位具有图像同级的锚标记的 :after 伪元素。

问题

但是，这个 CSS 并没有按预期工作。对于包含图像的锚点，伪元素不会隐藏。

解释

此行为的原因在于伪元素的本质。伪元素不是 DOM 树的一部分，由浏览器生成。因此，兄弟组合器无法直接针对它们。

CSS 规范规定：“生成的内容不会更改文档树。特别是，它不会反馈到文档语言处理器（例如，用于重新解析） )."

解决方案

要达到预期效果，必须使用 JavaScript。脚本可以迭代锚标记，并根据图像内容添加或删除所需的样式。

以上是同级组合器可以在 CSS 中选择 :before 或 :after 伪元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！