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

如何将伪元素选择器(：after)与属性选择器([title])组合？

我尝试使用div [title]：之后,但这在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的末尾显示“YES”,当它在第二个div之后显示“NO”时.

我正在运行Chrome 17.0.963.38.它似乎在Safari 5.1.2中运行良好.

这看起来像一个bug,最终是 reported.如果你在样式表的任何地方为div [title]添加一个至少有一个声明的CSS规则,你的div [title]：规则之后将会神奇地应用.例如：

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

见the updated fiddle.

它似乎与你的第二个div有关或没有某些HTML属性有关,如下面的评论所示.