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

问题描述

如何将伪元素选择器 (:after) 与属性选择器 ([title]) 结合起来?

How can I combine a pseudo-element selector (:after) with an attribute selector ([title])?

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

I tried using div[title]:after, but this doesn't work in Chrome.

HTML:

<div title="Zm9v">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".

It shows me "YES" at the end of each of those div's, when it should show "NO" after the second div.

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

I'm running Chrome 17.0.963.38. It seems to work fine in Safari 5.1.2.

推荐答案

这貌似是个bug，终于报告.如果您在样式表中为 div[title] anywhere 添加 CSS 规则并至少有一个声明，则您的 div[title]:after 规则会神奇地应用.例如:

This looks like a bug, which has finally been reported. If you add a CSS rule for div[title] anywhere in your stylesheet with at least one declaration, your div[title]:after rule will magically apply. For example:

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

参见更新的小提琴.

这似乎也与您的第二个 div 具有或不具有某些 HTML 属性有关，如下面的评论所示.

It also seems to have something to do with your second div having or not having certain HTML attributes, as shown in the comments below.

这篇关于结合 CSS 属性和伪元素选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！