Вопрос CSS - Специфика и временная интерференция

Question

Почему в следующем коде world синий, а не красный?

Специфика .my_class является 0,0,1,0, но он наследует цвет #my_id какая специфичность выше (0,1,0,0).

HTML:

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

CSS:

#my_id {
    color: red;
}

.my_class {
    color: blue;
}

Answer 1

См.: w3c: 6 Присвоение значений свойств, Каскадирование и Наследование - 6.2 Наследование

Унаследованное значение вступает в силу для элемента, только если никакое другое объявление стиля не было применено непосредственно к элементу.

Этот стиль применяется к элементу с id="my_id":

#my_id {
    color: red;
}

... и будет применять (наследовать) к элементу, вложенному в class="my_class" только если его color свойство не указано иначе.

... что больше не так, когда вы объявляете:

.my_class {
    color: blue;
}

Answer 2

Хороший вопрос. Причина, по которой это происходит, обусловлена ​​наследственностью, а не специфичностью.

Посмотрите на это так, если бы диапазон не имел этого класса, он унаследовал бы красный цвет от родительского элемента

, а "мир" был бы красным. Но обратите внимание, что это связано с наследованием.

Когда вы устанавливаете цвет для диапазона через класс, который переопределяет унаследованное значение.

Специфика заключается в определении того, какое правило использовать в нескольких конкурирующих правилах. В вашем примере нет конкурирующих правил для , поэтому специфичность не вступает в игру. Однако, если вы добавили это в свои стили:

#my_id span {color: orange}

вы бы увидели, что "мир" оранжевый, потому что специфика идентификатора больше, чем у класса.

Answer 3

Проще говоря, порядок специфичности применяется на том же уровне, если стиль родительского элемента более локальный, чем тот, который применяется, независимо от того, имеет ли предок стиль с более высокой специфичностью (поскольку он находится дальше или менее локально).).

Answer 4

Это зависит от специфики и местоположения. Класс применяется непосредственно к тексту, но идентификатор находится дальше.

Для длинного объяснения: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css