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

Question

如何将伪元素selector(:after)与属性selector([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的末尾显示"YES",当它在第二个div之后显示"NO"时.

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

Answer 1

这看起来像一个bug,最后报道了.如果您在样式表中的div[title] 任何位置添加至少一个声明的CSS规则,您的div[title]:after规则将会神奇地应用.例如:

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

看到更新的小提琴.

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