css – 我可以使用兄弟组合器定位一个:before或:after pseudo-element吗?

前端之家收集整理的这篇文章主要介绍了css – 我可以使用兄弟组合器定位一个:before或:after pseudo-element吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有理由这个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>

这个想法是在匹配的锚标签上有一个伪元素。但我不希望它适用于包装图像的锚标签。而且由于我无法使用像“我想,也许我可以瞄准:在伪元素后,找到一个像兄弟姐妹的图像。

任何见解将不胜感激。

解决方法

您无法定位:之后,因为它的内容不会在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来为你做这个工作。

原文链接:https://www.f2er.com/css/218604.html

猜你在找的CSS相关文章