组合CSS属性和伪元素选择器？ [英] Combine CSS Attribute and Pseudo-Element Selectors?

问题描述

如何将一个伪元素选择器（：后）与属性选择器（ [title] ）？

我尝试使用 div [title]：后，但在Chrome中无法使用。 / p>

HTML：

 < div title =foo此div有标题。< / div> 
< div>此div没有标题。< / div> 
  

CSS：

 code> div：after {
 content：NO; 
} 
 div [title]：after {
 content：YES; 
} 
  

演示： http://jsfiddle.net/jmAX6/

它在每个结尾显示YES div在第二个div后显示NO。

我运行的是Chrome 17.0.963.38。它似乎工作正常在Safari 5.1.2。

解决方案

这看起来像一个错误， http://code.google.com/p/chromium/issues/detail?id=125719 =nofollow>报告了。如果您在样式表中为 div [title] 添加至少一个声明的CSS规则，则 div [ title]：after 规则将神奇地应用。例如：

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

查看更新的小提琴。

这也似乎与你的第二个 div 具有或不具有某些HTML属性，如以下注释所示。

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

I tried using div[title]:after, but this doesn't work in 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";
}

Demo: http://jsfiddle.net/jmAX6/

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

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

解决方案

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";
}

See the updated fiddle.

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属性和伪元素选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！