В течение некоторого времени я использую небольшой трюк, который, как я думал, был умным.# id # id: Повторяющиеся вхождения одного и того же простого селектора должны повысить специфичность, но не для идентификаторов в IE9
Это комбинирует один и тот же селектор css, чтобы добавить спецификацию в селектор правил.
CSS функции упоминают:
Примечание: Повторные occurrances одного и того же простого селектора допускаются и действительно повышают специфичность.
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 ...
CSS консоль IE показывает вычисляемый селектор, равный #main .blue и удаляет второй ...
Почему?
Для меня это всего лишь другая реализация IE «ошибка».
Как предложил @BoltClock, я подал рапорт здесь:
Я могу подтвердить, это странно CSS: # body # body.blue {} –
Вы имеете в виду #body #body .blue {}? – denisol
Я не думаю, что это предполагаемое поведение, поэтому, пока оно работает прямо сейчас, оно может быть изменено в будущем, поэтому ваша веб-страница будет выглядеть иначе. Если вы хотите переопределить стиль, просто используйте! Important. –