Почему * дано больше специфичности, чем наследования свойств в CSS?
Проще говоря, у меня есть страница с этими двумя стилями:
* {
color: black;
}
div.error {
color: red
}
И структура страницы, как:
<html>
...
<div class="error">
<div class="row form">
<div class="column">
Error text.
</div>
</div>
</div>
...
</html>
Вы могли бы ожидать, что "Текст ошибки" будет красным, не так ли? Но на самом деле он отображается в черном цвете во всех браузерах. Это ожидаемое поведение?
Мой второй вопрос, зависит от того, является ли это ожидаемым поведением. если это так, то зачем дизайнеру когда-либо окрашивать каждый элемент на своем веб-сайте в "черный" или какой-либо другой цвет, если это означает, что его нельзя переопределить наследованием в определенных местах?
--РЕДАКТИРОВАТЬ--
Вопрос задается в контексте того, где вы хотите, чтобы цвет по умолчанию был размещен на всем сайте, но где бы вы ни хотели, вы могли бы сказать, что "весь этот раздел наследует цвет #ffeeff". Например, специальная форма, содержащая разделитель класса "форма". Вы не хотите маркировать каждый подэлемент формы специальным классом, таким как "белый текст", чтобы раскрасить все в белый цвет. Вы просто хотите установить цвет класса "form" и распространить его на подэлементы.
3 ответа
* более специфичен, чем таблицы стилей агента (таблицы стилей по умолчанию, которые поставляются вместе с браузером), а унаследованные свойства - не более чем что-то вроде этого:
div {
/* ... */
color: inherit;
/* ... */
}
В таблице стилей агента, так что ваш * с color: black более конкретно, чем agent:div с color: inheritТаким образом, он выигрывает.
Это ожидаемое поведение, для текста, который будет красным, вы хотите указать:
div.column {
/* ... */
color:red;
/* ... */
}
Проверьте: (почему) CSS-селектор звезд считается вредным? как предложено 4castle.
Просто сделайте это вместо этого:
<style>
* {
color: black;
}
div.error {
color: red
}
</style>
<div>
<div class="row">
<div class="column error">
Error text.
</div>
</div>
</div>
