结合CSS属性和伪元素选择器？

小编典典

css

如何将伪元素选择器（:after）与属性选择器（[title]）组合在一起？

我尝试使用div[title]:after，但这在Chrome中不起作用。

HTML：

<div title="foo">This div has a title.</div>
<div>This div does not have a title.</div>

CSS：

div:after {
    content: "NO";
}
div[title]:after {
    content: "YES";
}

在每个div的末尾显示“ YES”，第二个div之后应显示“ NO”。

我正在运行Chrome 17.0.963.38。在Safari 5.1.2中似乎可以正常工作。

阅读 249

2020-05-16

共1个答案

小编典典

这看起来像个错误，终于被报道了。如果您为样式表中的div[title]任何位置 添加CSS规则并至少包含一个声明，那么该div[title]:after规则将神奇地适用。例如：

div:after {
    content: "NO";
}
div[title] {
    display: block;
}
div[title]:after {
    content: "YES";
}

似乎也与第二个div属性是否具有某些HTML属性有关，如下面的注释所示。

2020-05-16