Как специфика CSS решает, какие стили применять?

Как CSS определяет, когда применять один стиль над другим?

Я несколько раз просматривал документ W3 CSS3 selectors, и это помогло мне понять, как лучше использовать CSS-селекторы в jQuery, но на самом деле это не помогло мне понять, когда одно правило CSS будет применяться над другим.

У меня есть следующий HTML: 

<div class='item'>
    <a>Link 1</a>
    <a class='special'>Link 2</a>
</div>

У меня есть следующий CSS: 

.item a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}

.special {
    text-decoration: underline;
    color: red;
    font-weight: normal;
    font-size: 2em;
}

Учитывая вышесказанное, и ссылка 1, и ссылка 2 будут стилизованы одинаково, как определяется с помощью .item a CSS. Почему стиль, связанный с .special , не имеет приоритета для ссылки 2?

Очевидно, я могу обойти это следующим образом: 

.special {
    text-decoration: underline !important;
    color: red !important;
    font-weight: normal !important;
    font-size: 1em !important;
}
Но я чувствую, что это хак, который я должен посыпать из-за моего непонимания.
3 6
css css-selectors css-specificity

3 ответа:

Он основан на IDs, classes и tags. IDs имеют наивысшую специфичность, то classes то tags, так что: 

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

Выигрывает тот, у кого больше :) если это ничья, выигрывает тот, кто идет последним в документе. Обратите внимание, что 1 0 0 бьет 0 1000 1000

Если вы хотите .special применить, сделайте его более конкретным: .item a.special

10

Я бы предложил вам ознакомиться с этим для дальнейшего использования. Для этого конкретного случая обратите внимание на пункт 3 в каскадном порядке:

  1. подсчитайте количество атрибутов ID в селекторе.
  2. подсчитайте количество атрибутов класса в селекторе.
  3. подсчитайте количество имен HTML-тегов в селекторе.

Если они применяются к вашему коду, .item a имеет 1 атрибут класса + 1 имя тега HTML, в то время как .special имеет только один класс атрибут. Следовательно, первый выигрывает право на стиль специальной ссылки.

2

Http://www.w3.org/TR/CSS21/cascade.html#specificity - это официальная спецификация специфичности.

Но если это TL; DR, то (слишком) короткая версия - чем больше слов у вас в селекторе, тем выше специфичность. И с этим !важно еще выше. Вот и все.

Edit: О, я вижу, что ваша ссылка содержит ту же информацию, что и моя. Сожалеть об этом.

1