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

Posted 2023-03-06

【中文标题】结合 CSS 属性和伪元素选择器？

【英文标题】：Combine CSS Attribute and Pseudo-Element Selectors?

【发布时间】：2012-02-15 15:11:40

【问题描述】：

如何将伪元素选择器 (: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 中运行良好。

【参考方案1】：

这看起来像一个错误，终于是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 属性有关，如下面的 cmets 所示。

【讨论】：

是的，看起来像一个错误，检查一下这个：jsfiddle.net/jmAX6/6 向没有标题的 div 添加一个类神奇地使它工作。

@Madmartigan：我还发现了一些其他相关的错误。现在提交报告似乎是一件苦差事。如果我记得，我会稍后再做。

看起来它也依赖于所使用的属性，所以这肯定是一个错误：jsfiddle.net/jmAX6/7 还可以查看带有tabindex 的那个，当你进入它时，伪元素会更正本身。

@Madmartigan：让我傻笑:)