css - 结合 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 的末尾显示“YES”，而在第二个 div 之后应该显示“NO”。

我运行的是 Chrome 17.0.963.38。它似乎在 Safari 5.1.2 中运行良好。

Answer 1

这看起来像个bug，终于被reported .如果您在样式表中为 div[title] anywhere 添加一条 CSS 规则，并且至少有一个声明，您的 div[title]:after 规则会神奇地应用。例如:

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

参见 the updated fiddle .

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