問(wèn)題描述

考慮一下這個(gè) CSS:

Consider this CSS:

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

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

還有這個(gè) 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>

現(xiàn)在看一下上面代碼在 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/

奇怪的是，如果你把每個(gè) 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/

有人知道這是從哪里來(lái)的嗎?是我做錯(cuò)了什么還是 Webkit 在這里表現(xiàn)得很愚蠢?

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

推薦答案

第一個(gè) 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.

因此，他們已經(jīng)意識(shí)到并修復(fù)了該錯(cuò)誤.您只需等待修復(fù)程序進(jìn)入穩(wěn)定頻道即可.

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.

如果存在錯(cuò)誤報(bào)告，我將嘗試查找錯(cuò)誤報(bào)告的鏈接.

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

這篇關(guān)于CSS 屬性選擇器 + 后代在 Webkit 中出現(xiàn)錯(cuò)誤?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！