Какая разница между наследованием CSS и начальным?

В чем именно разница между inherit и initial с точки зрения CSS? Для меня они всегда работали одинаково, например:

a.no-style{color: inherit}

будет делать то же самое, что и

a.no-style{color: initial}

Ответ 1

Начальное значение, приведенное в сводке определения каждого свойства CSS, имеет различное значение для унаследованных и не унаследованных свойств.

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

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

В CSS3 добавляется начальное ключевое слово, чтобы авторы могли явно указать это начальное значение.

Ключевое слово наследия означает использование любого значения, назначенного моему родителю.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

Ответ 2

Наследование всегда происходит из родительского элемента в дереве документа, даже если родительский элемент не является содержащим блоком. Исходный тег просто дает элементу его исходное значение.

Ответ 3

наследовать:

Ключевое слово inherit указывает, что свойство должно наследовать свое значение от родительского элемента.

пример

начальный:

Ключевое слово initial используется для установки значения свойства CSS по умолчанию.

пример

Ответ 4

наследует

Это ключевое слово применяет значение элементов parent,

имеет ли это смысл или нет. Некоторые свойства CSS, такие как цвет или font-family, автоматически унаследованы, но другие, такие как отображение или margin, arent. Ключевое слово inherit должно работать на всех CSS свойства.

начальное

Это ключевое слово применяет начальное значение, определенное в CSS технические характеристики. Иногда это начальное значение имеет смысл (float: нет), иногда его там по историческим причинам (background-repeat: повторять), и иногда спец-писатели делали по существу случайный, хотя и несколько оправданный выбор (цвет: черный).

Больше от Quirksmode сайт

Ответ 5

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

Наследовать: использовать зеленый цвет от родительского элемента.

Начальный: используйте начальный (черный) цвет.

Пример:

.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 &lt;div><br>
  <a href="">&lt;a href=""></a><br>
  <a href="" class="inherit">&lt;a href="" class="inherit"></a><br>
  <a href="" class="initial">&lt;a href="" class="initial"></a>
</div>

Ответ 6

color : initial не поддерживается Internet Explorer.