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之类的东西来定位锚点，我想我可以通过找到一个像是兄弟的图像来追踪伪元素。

非常感谢任何见解。

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的{{1}} 1}}元素。

可以将其重写为以下内容：

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

注意隐含的*选择器。与在隐含任何其他简单选择器之前省略*的方式类似，从伪元素中省略*也会暗示它存在。有关详细信息，请参阅spec。

现在，即使它显示*:after仍然匹配a:after（因为a匹配*），它仍然不会那样工作。如果从选择器中删除:after伪元素：

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

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

选择任何元素
这似乎是img的下一个兄弟这是a的后代（href以“http”开头）。

由于img是HTML中a元素的最后一个子元素，因此没有匹配的兄弟元素，因此不能生成:after个伪元素。< / p>

在:before或:after伪元素的情况下，可能会想到匹配伪元素的生成元素相对于伪元素的“兄弟”，但是因为OP已经正确他指出，there is no parent selector，所以他们也不幸。

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

2 个答案: