我可以使用兄弟组合器来定位一个：before或：after伪元素吗？ [英] Can I target a :before or :after pseudo-element with a sibling combinator?

问题描述

这个CSS无效的原因是什么？

Is there a reason why this CSS doesn't work?

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上？

.. on this 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 ，我想通过发现一个图像，它是一个同胞的图像可能我可以针对：伪元素。

The idea is to have a pseudo-element on matching anchor tags. But I do not want it to apply to anchor tags that wrap an image. And since I can't target anchors using something like a < img, I figured the maybe I could target the :after pseudo-element by finding an image that it's a sibling of.

任何洞察非常感谢。

推荐答案

你不能定位：因为它的内容不是在DOM中呈现，它 - 为了这个工作的DOM将不得不重新渲染，CSS不能像这样操作它。

You can't target :after since it's content is not rendered in the DOM and it does not manipulate it - for this to work the DOM would have to be re-rendered and CSS can't manipulate it like this.

查看规格详细了解： 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为您完成这项工作。

I suggest you use JavaScript to do the job for you.

这篇关于我可以使用兄弟组合器来定位一个：before或：after伪元素吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！