В течение некоторого времени я использую небольшой трюк, который, как я думал, был умным.
Это объединение одного и того же селектора css для добавления специфики к селектору правил.
Спецификации CSS упоминают:
Примечание. Повторяются записи одного и того же простого селектора и увеличивают специфичность.
http://www.w3.org/TR/css3-selectors/#specificity
Например, если HTML
<body>
<section id="main">
<header class="titles">
<h2>Title red</h2>
<h2 class="blue">Title blue</h2>
</header>
<h2 class="blue">Title blue</h2>
</section>
</body>
И CSS
#main .titles h2{
color: red;
}
#main .blue.blue{
color: blue;
}
Таким образом, я могу использовать класс .blue
для переопределения стилей, события в заголовке...
(Я делаю это, потому что ненавижу использовать !important
. Мне это следует избегать любой ценой.)
Первый селектор весит 0111 (1 id, 1 класс, 1 элемент) Второй селектор весит 0120 (1 id, 2 класса)
Иногда я делаю это с идентификаторами. И это работает... в реальных браузерах... Этот селектор:
#main#main .blue{}
должен весить 0200, так как он получил 2 идентификатора справа?
Ну IE9 (не пробовал другие) не интерпретирует несколько идентичных идентификаторов в селекторах.
Этот селектор не будет переопределять #main .titles h2{}
в IE9...
Консоль IE css показывает вычисленный селектор, равный #main .blue
, и удаляет второе вхождение...
Почему это?
Для меня это еще одна ошибка в реализации IE.
Как предположил @BoltClock, я подал отчет здесь: