考虑这个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在这里表现得很蠢？
答案 0 :(得分：5)
第一个jsFiddle在我的Chrome 12.0.742.112（稳定版）中被破坏。
但是，它适用于我的Chrome 14.0.803.0 dev-m。
所以，他们已经意识到并修复了这个错误。你必须等待修复才能进入稳定的通道。
我会尝试找到错误报告的链接（如果存在）。
答案 1 :(得分：3)
尝试将[_] {}添加到CSS（无论何处）。
实际上，它可以是任何属性选择器规则，没有后代子句，可能与原始选择器选择的属性元素匹配，即：[data-color] {}和div[data-color] {}将修复其他元素，但是a[data-color] {}无法修复它。
我在发布的小提琴（http://jsfiddle.net/aUCkn/）上测试了它，它适用于Safari（5.1.2）。
我的同事和我在玩了很多关于变通方法的随机想法后发现了它。
答案 2 :(得分：2)
使用Chrome（Webkit）时我也遇到了这个问题，虽然它似乎在Firefox和IE9中运行良好。 Webkit似乎确实存在额外的空格导致问题。
答案 3 :(得分：1)
---更新---
此问题已在Chrome版本~18中修复，但在其他基于WebKit的浏览器中仍然存在问题。
就这个问题的解决方案而言，Michael Morton上面的答案是最好的 - 它比我的更灵活，更高效。我赞成迈克尔的答案并建议你使用它。
这是一个解决问题的CSS黑客：http://jsfiddle.net/aUCkn/101/
您只需将* +放在选择器之前。现在你们在使用星形选择器之前抓住你的干草叉和火炬之前，请记住它一直向左，所以它不应该以任何有意义的方式影响性能;）
PS - 我还可以确认此错误会影响所有平台和设备上的所有版本的所有WebKit浏览器 - Chrome 14+除外。这是一个绝对可怕的错误，现在大多数WebKit浏览器需要收回他们支持的声明，即使是现在古老的CSS2.1规范。哇，哈哈。