Как специфика CSS определяет, какие стили применять? - PullRequest
Новая
       13

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

6 голосов
/ 03 февраля 2012

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

Я несколько раз просматривал документ о селекторах *1003* W3 *, и это помогло мне понять, как лучше использовать селекторы 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;
}

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

Очевидно, я могу обойти это так: 

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

Но я чувствую, что это хак, в который я должен засыпать из-за недостатка понимания.

Ответы [ 3 ]

10 голосов
/ 03 февраля 2012

Он основан на 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

2 голосов
/ 03 февраля 2012

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

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

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

1 голос
/ 03 февраля 2012

http://www.w3.org/TR/CSS21/cascade.html#specificity является официальной спецификацией специфики.

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

Редактировать: о, я вижу, что ваша ссылка имеет ту же информацию, что и моя.Извините за это.

...