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

Question

有什么原因导致此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="https://www.google.com/logos/classicplus.png">
</a>

这个想法是在匹配的锚标签上有一个伪元素。但是我不希望它适用于包装图像的锚标签。而且由于我无法使用诸如来定位锚a < img，所以我想也许可以通过找到一个与之类似的图像来定位：after伪元素。

任何见识将不胜感激。

Answer 1

您无法定位：之后，因为它的内容未在DOM中呈现且无法对其进行操作-为此，必须重新呈现DOM，而CSS不能像这样进行操作。

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

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