我可以使用兄弟组合器来定位a:之前或:之后的伪元素吗？

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>

想法是在匹配的锚标签上有一个伪元素.但我不希望它适用于包装图像的锚标签.而且由于我不能使用类似的东西来定位锚点a < img,我想通过找到一个它是兄弟的图像,我可以将目标定位在:after伪元素之后.

任何见解将不胜感激.

Answer 1

您无法定位:之后因为它的内容未在DOM中呈现而且它不会对其进行操作 - 为此,DOM必须重新呈现并且CSS无法像这样操纵它.

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

生成的内容不会更改文档树.特别是,它不会反馈给文档语言处理器(例如,用于重新分析).

我建议你使用JavaScript为你完成这项工作.

Answer 2

您不能使用组合子相对于其生成元素以外的元素来定位伪元素.

这是因为它们是伪元素,而不是实际元素,组合器只能通过建立实际元素之间的关系来工作.另一方面,伪元素只能应用于选择器的主体(最右边的复合选择器),并且只有在真实元素上处理匹配后才会发生这种情况.换句话说,首先进行匹配,就好像伪元素不在那里一样,然后如果在选择器中指示的伪元素被应用于每个匹配.

在您的代码中,以下选择器:

a[href^="http"] img ~ :after

实际上并不查找:after在img内部之后出现的伪元素a,即使它看起来是这样,因为它们都被渲染为a元素的子元素.

它可以重写为以下内容:

a[href^="http"] img ~ *:after

注意*隐含的选择器.类似于*在任何其他简单选择器之前可以省略它的方法,省略*伪元素也使它隐含在那里.有关详细信息,请参阅规格

现在,即使看起来*:after仍然匹配a:after(因为a匹配*),它仍然不会那样工作.如果:after从选择器中删除伪元素:

a[href^="http"] img ~ *

您会注意到选择器的含义完全改变:

选择任何
显示为以下兄弟的元素,该元素img
是a(href以"http"开头)的后代.

由于它img是aHTML中元素的最后一个子元素,因此没有匹配的兄弟:after元素,因此不能生成伪元素.

在一个:before或:after伪元素的情况下,人们可能会想到相对于伪元素的"兄弟"匹配伪元素的生成元素,但是正如OP正确指出的那样,没有父选择器,所以它们是那里也没有运气.