CSS selector de atributos + descendiente da un error en Webkit?
Considere este CSS:
[data-color="red"] h1 {
background-color:red;
}
[data-color="blue"] h1 {
background-color:blue;
}
Y este 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>
Ahora eche un vistazo a la siguiente demostración del código anterior en Webkit y cualquier otro navegador:
http: //jsfiddle.net/aUCkn
Lo extraño es que si pones cada h1 en la misma línea, es decir
<div data-color="red"><h1>red</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
También funciona en Webkit:
http: //jsfiddle.net/aUCkn/1
¿Alguien sabe de dónde viene esto? ¿Estoy haciendo algo mal o Webkit está actuando de manera estúpida aquí?