我可以使用兄弟组合器来定位一个: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?
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屋!