CSS 属性选择器 + 后代在 Webkit 中出现错误?

问题描述

考虑一下这个 CSS:

Consider this 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/

Now take a look at the following demo of the above code in Webkit and any other browser:
http://jsfiddle.net/aUCkn/

奇怪的是，如果你把每个 h1 放在同一行，即:

What's strange is that if you put each h1 on the same line, i.e.:

<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/

It works in Webkit too:
http://jsfiddle.net/aUCkn/1/

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

Does anyone know where this comes from? Am I doing something wrong or is Webkit acting stupid here?

推荐答案

第一个 jsFiddle 在我的 Chrome 12.0.742.112 (stable) 中坏了.

The first jsFiddle is broken in my Chrome 12.0.742.112 (stable).

但是，它适用于我的 Chrome 14.0.803.0 dev-m.

However, it works in my Chrome 14.0.803.0 dev-m.

因此，他们已经意识到并修复了该错误.您只需等待修复程序进入稳定频道即可.

So, they're already aware of and have fixed the bug. You just have to wait for the fix to land in the stable channel.

如果存在错误报告，我将尝试查找错误报告的链接.

I'll try to find a link to a bug report, if one exists.

这篇关于CSS 属性选择器 + 后代在 Webkit 中出现错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！