css - 我可以定位 :before or :after pseudo-element with a sibling combinator?

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>

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

如有任何见解，我们将不胜感激。

Answer 1

你不能定位 :after 因为它的内容不在 DOM 中呈现并且它不操纵它 - 为此，DOM 必须重新呈现并且 CSS 不能像这样操纵它。

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

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

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