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

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

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

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

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

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

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

#my_id span {color: orange}

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

#my_id {
    color: red;
}

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

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

.my_class {
    color: blue;
}