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

Question

如何将伪元素选择器 (: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";
}

演示: http://jsfiddle.net/jmAX6/

它在每个 div 的末尾，当第二个 div 之后应该显示“NO”时。

我运行的是 Chrome 17.0.963.38。它似乎在 Safari 5.1.2 中工作正常。

Answer 1

这看起来像是一个错误，最终报告。如果您在样式表中的 任意位置 添加了一条 CSS 规则，并且至少有一个声明，则您的 div[title]:after 规则会神奇地应用。例如：

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

请参阅更新后的小提琴。

它似乎也与您的第二个 div 有或没有某些 HTML 属性有关，如下面的评论所示。