我可以使用兄弟组合器定位 :before 或 :after 伪元素吗？

Posted 2023-03-06

【中文标题】我可以使用兄弟组合器定位 :before 或 :after 伪元素吗？

【英文标题】：Can I target a :before or :after pseudo-element with a sibling combinator?

【发布时间】：2011-12-05 19:44:30

【问题描述】：

这个 CSS 不起作用有什么原因吗？

http://jsfiddle.net/6v5BZ/

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="https://www.google.com/logos/classicplus.png">
</a>

这个想法是在匹配的锚标签上有一个伪元素。但我不希望它应用于包装图像的锚标签。而且由于我无法使用 a < img 之类的东西来定位锚点，我想也许我可以通过找到一个图像来定位 :after 伪元素，它是它的兄弟。

任何见解将不胜感激。

【问题讨论】：

CSS2 语法：:after，CSS3 语法：::after。

伪元素语法无关紧要。两者都行。

哦，我怎么也想要这个..

我在谷歌上搜索是否可以通过媒体查询定位伪元素。我认为它不能

【参考方案1】：

您不能使用组合器来定位相对于其生成元素以外的元素的伪元素。

这是因为它们是伪元素，而不是实际元素，并且组合子只能通过建立实际元素之间的关系来工作。另一方面，伪元素只能应用于选择器的主题（最右边的复合选择器），并且只有在对真实元素进行匹配之后才会发生这种情况。换句话说，首先进行匹配，就好像伪元素不存在一样，然后伪元素（如果在选择器中指示）将应用于每个匹配项。

在您的代码中，以下选择器：

a[href^="http"] img ~ :after

实际上并不在a 中寻找出现在img 之后的:after 伪元素，尽管看起来是这样，因为两者都被渲染为a 元素的子元素。

可以改写为：

a[href^="http"] img ~ *:after

注意* 选择器，这是隐含的。与您可以在任何其他简单选择器之前省略 * 以使其隐含的方式类似，从伪元素中省略 * 也使其暗示存在。详情请见spec。

现在，即使看起来*:after 仍应匹配a:after（因为a 将匹配*），但它仍然不能这样工作。如果您从选择器中删除 :after 伪元素：

a[href^="http"] img ~ *

您会注意到选择器的含义完全改变了：

选择任何元素 显示为 img 的以下同级 这是a 的后代（href 以“http”开头）。

由于 img 是 HTML 中 a 元素的最后一个子元素，因此没有可匹配的后续兄弟元素，因此无法生成 :after 伪元素。

在 :before 或 :after 伪元素的情况下，人们可能会考虑将伪元素的生成元素与伪元素的“兄弟”相匹配，但正如 OP 正确指出的那样，@ 987654322@，所以他们在那里也不走运。

【讨论】：

使用:last-child伪类定位伪元素是否也行不通，因为正如你提到的，选择器，然后是伪元素？

@Jacob Schneider：没错。伪元素既不是其父元素的第一个、最后一个，也不是第 n 个子元素。那些结构伪类与伪元素不匹配。

【参考方案2】：

你不能定位 :after 因为它的内容没有在 DOM 中呈现并且它不会对其进行操作 - 要使其工作，必须重新渲染 DOM 并且 CSS 不能像这样操作它。

查看规范详细了解：http://www.w3.org/TR/CSS2/generate.html#propdef-content

生成的内容不会改变文档树。特别是，它 不反馈给文档语言处理器（例如，对于 重新分析）。

我建议您使用 javascript 为您完成这项工作。

【讨论】：

这对于伪元素和 DOM 来说是正确的。因此，它还与伪元素选择器的处理方式有关。看我的回答。