CSS属性选择器+ descendant在Webkit中给了一个bug？

Question

考虑一下CSS：

[data-color="red"] h1 {
background-color:red;
}

[data-color="blue"] h1 {
background-color:blue;
}

和这个HTML：

<div data-color="red">
<h1>red</h1>
</div>

<div data-color="blue">
<h1>blue</h1>
</div>

<div data-color="blue">
<h1>blue</h1>
</div>

现在看看Webkit和任何其他浏览器中上述代码的以下演示：

http://jsfiddle.net/aUCkn/

奇怪的是，如果您将每个h1放在同一行，即：

<div data-color="red"><h1>red</h1>
</div>

<div data-color="blue"><h1>blue</h1>
</div>

<div data-color="blue"><h1>blue</h1>
</div>

它在Webkit中也可以工作：

http://jsfiddle.net/aUCkn/1/

有人知道这是从哪里来的吗？是我做错了什么，还是Webkit在这里表现得很愚蠢？

Answer 1

在我的Chrome12.0.742.112(稳定)中，第一个jsFiddle是坏的。

然而，它可以在我的Chrome 14.0.803.0 dev-m上运行。

所以，他们已经意识到并修复了这个bug。您只需等待修复程序到达稳定通道即可。

我将尝试查找指向bug报告的链接(如果存在)。

Answer 2

尝试将[_] {}添加到你的CSS中(在哪里并不重要)。

实际上，它可以是任何没有后代子句的属性选择器规则，它将潜在地匹配由原始选择器选择的属性元素，即：[data-color] {}和div[data-color] {}将修复其他元素，但a[data-color] {}不会修复它。

我在posted小提琴(http://jsfiddle.net/aUCkn/)上测试了它，它在Safari (5.1.2)上工作。

我和我的同事在尝试了很多变通方法的随机想法后找到了它。

Answer 3

当使用Chrome (Webkit)时，我也遇到了这个问题，尽管它在火狐和IE9中似乎工作得很好。这显然是Webkit的一个问题，额外的空格会导致问题。