почему CSS применить #flowerContainer правило IMG вместо применения #flower правила

Question

OK Есть много статей, говорящих о каскадных приоритетах в CSS, я недавно прочитал this one и есть некоторые моменты, я понял это: -

1. веса идентификатора более класса и класса больше, чем тег
2. веса идентификатора так же, как встроенный стиль, но так как рядные приходит позже он выигрывает превалирующее правило
3. больше веса селектора больше, чем меньше селектора, т.е. .container img правила, отменяет img правила

Посмотрите на этот код: -

<div id="flowerContainer" > 
    <img id="flower" src="..." /> 
</div> 

Попробуйте применить следующие правила: -

#flowerContainer img{width:500px;} 
#flower {width:300px} 

Согласно второму правилу #flower ширина правило должно применяться, но #flowerContainer img вместо этого применяется вместо этого?

Answer 1

Here является официальной документацией о том, как CSS вычисляет, какие селекторы имеют приоритет.

Специфичность селектора вычисляется следующим образом:

• подсчитать количество атрибутов идентификаторов в селекторе (= а)
• подсчитать число других атрибутов и псевдо-классов в селекторе (= b)
• подсчитать количество имен элементов в селекторе (= c) игнорировать псевдоэлементы.

Объединение трех чисел a-b-c (в числовой системе с большой базой ) дает специфику.

Некоторые примеры:

*    {} /* a=0 b=0 c=0 -> specificity = 0 */ 
LI   {} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL+LI  {} /* a=0 b=0 c=3 -> specificity = 3 */ 
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {} /* a=0 b=1 c=3 -> specificity = 13 */ 
LI.red.level {} /* a=0 b=2 c=1 -> specificity = 21 */ 
#x34y   {} /* a=1 b=0 c=0 -> specificity = 100 */ 

#id element правила (101) являются более конкретными, чем #id правил (100), так что они будут иметь приоритет.

Answer 2

Спецификация #flowerContainer imgвыше, чем спецификация для #flower, поэтому для этого правила была применена.

Это связано с тем, что у одного из них есть только идентификатор, а у другого есть как селектор ID , так и тип селектора.

Подробнее на MDN о специфике: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 3

Сначала вы должны прочитать, как CSS вычислить специфичность here.

Специфичность селектора вычисляется следующим образом:

• подсчитать количество атрибутов идентификаторов в селекторе (= а)
• подсчитать число других атрибутов и псевдо-классов в селекторе (= b)
• подсчитать количество имен элементов в селекторе (= c) игнорировать псевдоэлементы.

Сочетание трех чисел a-b-c (в системе с большим основанием) дает специфику.

Таким образом, в случае,

#flowerContainer img { width:500px; } /* a=1,b=0,c=1 (a-b-c = 101) */ 

#flower { width:300px; } /* a=1,b=0,c=0 (a-b-c = 100) */ 

Так #flowerContainer img (101) более специфичны, чем #flower (100)