Объединить 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 работает нормально.

1 ответ

Решение

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

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

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

Кажется, это как-то связано с твоим вторым div иметь или не иметь определенные атрибуты HTML, как показано в комментариях ниже.

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