Селектор атрибутов CSS + потомок дает ошибку в Webkit?

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

Ответы

Ответ 1

Первый jsFiddle разбит на моем Chrome 12.0.742.112 (стабильный).

Однако он работает в моем браузере Chrome 14.0.803.0.

Итак, они уже знают об этом и исправили ошибку. Вам просто нужно подождать, пока исправление приземлится в стабильном канале.

Я попытаюсь найти ссылку на отчет об ошибке, если таковой существует.

Ответ 2

Попробуйте добавить [_] {} в свой CSS (неважно, где).

В действительности это может быть любое правило выбора атрибута без предложения потомка, которое потенциально будет соответствовать атрибутам, выбранным исходными селекторами, то есть: [data-color] {} и div[data-color] {} будут исправлять остальные, но a[data-color] {} не будет исправлять его.

Я тестировал его на опубликованной скрипке (http://jsfiddle.net/aUCkn/), и он работает для Safari (5.1.2).

Мой коллега, и я нашел его после игры с множеством случайных идей для обходных решений.

Ответ 3

При использовании Chrome (Webkit) я тоже получаю эту проблему, хотя, похоже, она отлично работает в Firefox и IE9. Очевидно, что проблема с Webkit связана с тем, что лишние пробелы вызывают проблемы.

Ответ 4

--- ОБНОВЛЕНИЕ ---

Эта проблема исправлена ​​в Chrome с версии ~ 18, она по-прежнему остается проблемой в других браузерах на основе WebKit.

Что касается решений этой проблемы, Майкл Мортон отвечает выше, это лучший из них - он более гибкий и эффективный, чем мой. Я подтвердил ответ Майкла и предложил вам использовать его.

Здесь взломан CSS, который устраняет проблему: http://jsfiddle.net/aUCkn/101/

Вам нужно просто поставить * + перед селектором. Теперь перед тем, как вы все захватите вилы и факелы над использованием селектора звезд, помните, что все это влево, поэтому оно не должно влиять на производительность каким-либо значимым образом;)

PS - Я также могу подтвердить, что эта ошибка затрагивает ВСЕ версии ВСЕХ браузеров WebKit на всех платформах и устройствах - кроме Chrome 14+. Какая абсолютно ужасная ошибка, теперь большинство браузеров WebKit должны отменить заявку, которую они поддерживают даже сейчас-древнюю спецификацию CSS2.1. Вау, LOL.