CSS правила с более низкой специфичностью переопределяют правила с более высокой специфичностью

Question

У меня есть этот простой код CSS:

p.child-class {
    color: red;
}

.parent-class p {
    color: green;
}

HTML:

<div class="parent-class">
    <p class="child-class"></div>
</div>

Селектор .parent-class применяется вместо селектора более высокой специфичности p.child-class, Это почему?
Вот скрипка

РЕДАКТИРОВАТЬ

Я понимаю, что оба имеют одинаковую специфику. В таком случае, как я могу повысить специфичность класса ребенка, если я не могу редактировать код класса родителя?

Answer 1

Селекторы .parent-class p а также p.child-class имеют одинаковую специфику CSS, оба имеют 1 селектор тега и 1 селектор класса. Селектор, который приходит позже в коде, будет применяться.

Answer 2

Ваши оба правила имеют разное значение

.parent-class p

это указать правило для p который находится внутри контейнера, имеющего класс .parent-class

p.child-class

это указать правило для p который имеет класс child-class

Пример JsFiddle

Answer 3

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

Добавление .parent-class изменит специфику

.parent-class p.child-class {

и тогда порядок не будет иметь значения.

Answer 4

Вы могли бы использовать !important

При использовании! Важным является правильный выбор