39

这个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 伪元素。

任何见解将不胜感激。

4

2 回答 2

25

您不能定位 :after 因为它的内容没有在 DOM 中呈现并且它不会对其进行操作 - 为此，必须重新渲染 DOM 并且 CSS 不能像这样操作它。

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

生成的内容不会改变文档树。特别是，它不会被反馈给文档语言处理器（例如，用于重新解析）。

我建议您使用 JavaScript 为您完成这项工作。

于 2011-10-12T08:42:57.760 回答
19

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

这是因为它们是伪元素，而不是实际元素，并且组合器只能通过建立实际元素之间的关系来工作。另一方面，伪元素只能应用于选择器的主题（最右边的复合选择器），并且只有在对真实元素进行匹配之后才会发生这种情况。换句话说，首先进行匹配，就好像伪元素不存在一样，然后伪元素（如果在选择器中指示）将应用于每个匹配项。

在您的代码中，以下选择器：

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

实际上并不寻找在 中的 a 之后出现的伪:after元素，即使它看起来是这样的，因为两者都被渲染为元素的子元素。imgaa

可以改写为以下内容：

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

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

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

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

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

选择作为 an的后代（以“http”开头）
的后继兄弟出现的任何元素。img
ahref

由于img是 HTML 中元素的最后一个子a元素，因此没有可匹配的后续兄弟元素，因此无法:after生成伪元素。

在 a:before或:after伪元素的情况下，人们可能会考虑将伪元素的生成元素与伪元素的“兄弟”相匹配，但正如 OP 正确指出的那样，没有父选择器，所以它们是那里也不走运。

于 2011-10-13T02:38:27.307 回答