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

Question

这个 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 a a a a a a a a a a a a a a a < 之类的东西来定位锚点。 img，我想也许我可以通过查找其同级图像来定位 :after 伪元素。

任何见解将不胜感激。

Answer 1

你不能以 :after 为目标，因为它的内容没有在 DOM 中渲染，也不会对其进行操作 - 要使其工作，必须重新渲染 DOM，而 CSS 无法像这样操作它。

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

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

我建议您使用 JavaScript 来完成这项工作。

Answer 2

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

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

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

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

实际上并不查找位于 a 内 img 之后的 :after 伪元素，即使尽管看起来是这样，因为两者都呈现为 a 元素的子元素。

它可以重写为以下内容：

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

注意 * 选择器，它是隐含的。与如何在任何其他简单选择器之前省略 * 以使其隐含类似，从伪元素中省略 * 也会使其隐含在那里。有关详细信息，请参阅规范。

现在，即使看起来 *:after 仍然应该匹配 a:after （因为 a 会匹配 *） ，这样仍然不行。如果从选择器中删除 :after 伪元素：

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

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

选择任意元素
显示为 img
的后续同级
它是 a 的后代（其 href 以“http”开头）。

由于 img 是 HTML 中 a 元素的最后一个子元素，因此没有后续同级元素可以匹配，因此没有 :after 伪元素- 可以生成元素。

对于 :before 或 :after 伪元素，人们可能会考虑将伪元素的生成元素相对于伪元素的“同级”进行匹配，但是正如OP正确指出的那样， 没有父选择器，所以他们那里运气不好， 也。