У меня есть этот простой код 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. Почему?
Вот скрипка.
ИЗМЕНИТЬ
Я понимаю, что оба имеют одинаковую специфику. В таком случае, как я могу повысить специфичность дочернего класса, если я не могу редактировать код родительского класса?
Селекторы .parent-class p и p.child-class имеют точно такую же специфику CSS, оба имеют 1 селектор тега и 1 селектор класса. Селектор, который появляется позже в коде, будет применяться.
p.child-class.child-class. Это не изменит значение селектора, но повысит его формальную специфичность.
- person Ilya Streltsyn; 29.07.2013
Оба ваши правила имеют разное значение
.parent-class p
это указывает правило для p, которое находится внутри контейнера, имеющего класс .parent-class
p.child-class
это указывает правило для p, которое имеет класс child-class
Как уже упоминалось, они имеют одинаковую специфику, порядок правил имеет значение.
Добавление .parent-class изменит специфичность
.parent-class p.child-class {
и тогда порядок не будет иметь значения.
parent-class? Как бы я увеличил специфичность ребенка тогда?
- person Yoav Kadosh; 29.07.2013
child-class. Если вы можете редактировать HTML, вы можете, конечно, добавить совершенно новый класс или идентификатор.
- person Andy G; 29.07.2013
Вы можете использовать !important
При использовании !important — правильный выбор
