В чем именно разница между inherit
и initial
с точки зрения CSS?
Для меня они всегда работали одинаково, например:
a.no-style{color: inherit}
будет делать то же самое, что и
a.no-style{color: initial}
В чем именно разница между inherit
и initial
с точки зрения CSS?
Для меня они всегда работали одинаково, например:
a.no-style{color: inherit}
будет делать то же самое, что и
a.no-style{color: initial}
Начальное значение, приведенное в сводке определения каждого свойства CSS, имеет различное значение для унаследованных и не унаследованных свойств.
Для унаследованных свойств используется начальное значение, только для корневого элемента, если для элемента не указано значение.
Для не унаследованных свойств начальное значение используется для любого элемента, когда для элемента не указано значение.
В CSS3 добавляется начальное ключевое слово, чтобы авторы могли явно указать это начальное значение.
Ключевое слово наследия означает использование любого значения, назначенного моему родителю.
Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value
Наследование всегда происходит из родительского элемента в дереве документа, даже если родительский элемент не является содержащим блоком. Исходный тег просто дает элементу его исходное значение.
наследовать:
Ключевое слово inherit указывает, что свойство должно наследовать свое значение от родительского элемента.
начальный:
Ключевое слово initial используется для установки значения свойства CSS по умолчанию.
наследует
Это ключевое слово применяет значение элементов parent,
имеет ли это смысл или нет. Некоторые свойства CSS, такие как цвет или font-family, автоматически унаследованы, но другие, такие как отображение или margin, arent. Ключевое слово inherit должно работать на всех CSS свойства.
начальное
Это ключевое слово применяет начальное значение, определенное в CSS технические характеристики. Иногда это начальное значение имеет смысл (float: нет), иногда его там по историческим причинам (background-repeat: повторять), и иногда спец-писатели делали по существу случайный, хотя и несколько оправданный выбор (цвет: черный).
Больше от Quirksmode сайт
Разница показывается, когда родительский элемент переопределил цвет.
Наследовать: использовать зеленый цвет от родительского элемента.
Начальный: используйте начальный (черный) цвет.
Пример:
.green{color:green;border:1px solid #ccc;padding:6px;}
a {color:blue;}
a.inherit {color: inherit;}
a.initial {color: initial}
<div class="green">
Green text in this <div><br>
<a href=""><a href=""></a><br>
<a href="" class="inherit"><a href="" class="inherit"></a><br>
<a href="" class="initial"><a href="" class="initial"></a>
</div>
color : initial
не поддерживается Internet Explorer.