Объединить 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, как показано в комментариях ниже.