Объединить атрибуты CSS и селекторы псевдоэлементов?

Как я могу объединить селектор псевдоэлементов (:after) с селектором атрибутов ([title])?

Я пытался использовать div[title]:after, но это не работает в Chrome.

HTML:

<div title="foo">This div has a title.</div>
<div>This div does not have a title.</div>

CSS:

div:after {
    content: "NO";
}
div[title]:after {
    content: "YES";
}

Демонстрация: http://jsfiddle.net/jmAX6/

Он показывает мне «ДА» в конце каждого из этих div, когда он должен показывать «НЕТ» после второго div.

У меня Chrome 17.0.963.38. Кажется, он отлично работает в Safari 5.1.2.


google-chrome css css-selectors pseudo-element
person Senseful    schedule 21.01.2012    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Это похоже на ошибку, о которой, наконец, сообщено. Если вы добавите правило CSS для div[title] в любом месте таблицы стилей хотя бы с одним объявлением, ваше правило div[title]:after волшебным образом будет применено. Например:

div:after {
    content: "NO";
}
div[title] {
    display: block;
}
div[title]:after {
    content: "YES";
}

См. обновленную скрипту.

Это также, похоже, имеет какое-то отношение к вашему второму div, имеющему или не имеющему определенные атрибуты HTML, как показано в комментариях ниже.

person BoltClock    schedule 24.01.2012
comment
Да, похоже на ошибку, проверьте вот это: jsfiddle.net/jmAX6/6 Добавление класса к div без названия волшебным образом заставляет его работать. - person Wesley Murch; 24.01.2012
comment
@Madmartigan: я также нахожу несколько других связанных ошибок. Теперь подача отчета кажется просто рутиной. Я сделаю это позже, если не забуду. - person BoltClock; 24.01.2012
comment
Похоже, это также зависит от используемого атрибута, так что это определенно должно быть ошибкой: jsfiddle.net/jmAX6/ 7 Также проверьте элемент с tabindex, когда вы переходите к нему, псевдоэлемент исправляет себя. - person Wesley Murch; 24.01.2012
comment
@Madmartigan: заставил меня ухмыльнуться :) - person BoltClock; 24.01.2012