Объединить CSS атрибуты и селекторы псевдоэлементов? - PullRequest
7 голосов
/ 21 января 2012

Как объединить селектор псевдоэлемента (: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 он работает нормально.

1 Ответ

9 голосов
/ 24 января 2012

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

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

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

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

...