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

Question

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

В прошлом году я работал с большим количеством JavaScript, а селекторы на основе CSS, используемые в jQuery, заставили меня узнать больше о том, как они работают. Я несколько раз проходил через W3 CSS3 selectors document, и это помогло мне понять, как лучше использовать селектора 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; } 

Но я чувствую, что это хак, что я должен посыпать из-за мое отсутствие понимания. Когда я использую !important, я чувствую себя немного похож на наркомана, который скользит по небольшому количеству запрещенного вещества, заявляя, что нормально заниматься «одним-единственным», прежде чем уйти навсегда.

Кроме того, если бы я хотел действительно узнать CSS, есть ли отличные книги, чтобы рекомендовать?

Answer 1

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

Answer 2

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

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

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

Answer 3

Я предлагаю вам ознакомиться с this для справок в будущем. В данном конкретном случае, обратите внимание, пункт 3 под каскадным заказом:

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

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