важно перекрываться классом дочернего элемента

Question

У меня есть очень плохие правила CSS (высокая специфичность, использование важно!), Который устанавливает цвет текста в абзаце:

#wrapper .article .text { 
    color: green !important; 
} 

Тогда я поставил простой пролет элемент в этом пункте и установить цвет текста диапазона с помощью простого класса:

.black { 
    font-weight: bold; 
    color: black; 
} 

Как прийти, что этот простой класс с низкой специфичностью и не важен, флаг переопределяет родительское правило!?

Полный фрагмент на codepen.io здесь: http://codepen.io/Jarino/pen/oXYeQZ?editors=110

Answer 1

Это просто потому, что для этого <span> нет более конкретного правила, чем то, что вы заявили в .black. Несмотря на то, что это дочерний элемент <p>, который имеет флаг important!, он наследует только цвет от него, если не может найти более конкретного другого определения цвета. Наследование из родительского контекста является наименее конкретным «правилом». Кроме того, часть правила не наследуется, афайк.

Если бы это было не так, вам бы очень часто приходилось использовать !important всякий раз, когда элемент принимает стиль, который он уже унаследовал от родителя, или вам придется постоянно использовать очень длинные селектор, чтобы убедиться, что ваш ребенок элемент селектора элементов не имеет более низкой специфичности, чем определение, которое он наследует.

Кроме того, сравните то, что говорит Mozilla по теме:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements

Answer 2

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

Answer 3

Поскольку !important применяется только для текущего стиля элемента не для дочерних элементов с указанным же свойством.

Answer 4

Почему этот простой класс с низкой специфичностью и нет! Important flag переопределяет родительское правило?

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

После того как вы добавили пролет с другим классом, он не будет перезаписан, потому что это другое правило. Он применяется к пролету. И .text применяется к абзацу.

Answer 5

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

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

Если вы делаете «Inspect Element» для этого тега дочернего span в консоли разработчика вашего браузера, вы увидите, как предпочтение отдается правилам CSS, нацеленным на этот конкретный элемент, который переопределяет все родительские стили, которые появляются с список.