# id # id: повторяющиеся вхождения одного и того же простого селектора должны повысить специфичность, но не для идентификаторов в IE9
В течение некоторого времени я использую маленький трюк, который я считал умным.
Это объединяет один и тот же селектор 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 идентификатор, 1 класс, 1 элемент) Второй селектор весит 0120 (1 идентификатор, 2 класса)
Иногда я делаю это с помощью идентификаторов. И это работает ... в реальных браузерах ... Этот селектор:
#main#main .blue{}
должен весить 0200, так как у него 2 идентификатора, верно?
Ну, IE9 (не пробовал другие) не интерпретирует несколько идентификаторов в селекторах. Этот селектор не переопределит#main .titles h2{} в IE9 ...
Консоль IE css показывает вычисленный селектор, равный#main .blue и удаляет второй случай ...
Это почему?
Для меня это просто еще одна "ошибка" в реализации IE.
Как предложил @BoltClock, я подал отчет здесь: