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 ведет себя глупо?

4 ответа

Решение

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

Тем не менее, он работает в моем Chrome 14.0.803.0 dev-m.

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

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

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

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

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

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

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

--- ОБНОВИТЬ ---

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

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


Вот CSS-хак, который решает проблему: http://jsfiddle.net/aUCkn/101/

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

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

Другие вопросы по тегам