Рассмотрим этот 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 глупо?