Ключевое слово CSS `inherit`

Ключевое слово inherit CSS заставляет элемент принимать вычисленное значение свойства родительского элемента. Его можно применять к любому свойству CSS, включая сокращённое свойство CSS all.

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

Примеры

Основное использование

В этом примере мы демонстрируем действие ключевого слова inherit, сравнивая два абзаца с вложенными элементами: встроенные элементы в одном абзаце используют стили браузера по умолчанию, а в другом наследуют отдельные значения свойств от родительского элемента.

HTML

Мы добавляем два одинаковых абзаца с несколькими встроенными элементами.

<p>
  This paragraph has <em>emphasized text</em>, <strong>strong text</strong>, and
  <a href="#">a link to top</a>.
</p>
<p>
  This paragraph has <em>emphasized text</em>, <strong>strong text</strong>, and
  <a href="#">a link to top</a>.
</p>

CSS

Мы не задаём стили встроенным элементам в первом абзаце, поэтому они используют стили браузера по умолчанию. Во втором абзаце мы задаём для каждого встроенного элемента свойства со значением inherit, чтобы они получили вычисленные стили родительского элемента <p>.

p:nth-of-type(2) {
  a {
    text-decoration: inherit;
    color: inherit;
  }
  em {
    font-style: inherit;
  }
  strong {
    font-weight: inherit;
  }
}

Результат

Наследование всех значений свойств

В этом примере мы используем ту же HTML-разметку, что и в предыдущем, чтобы продемонстрировать проблемы, которые могут возникнуть при применении ключевого слова inherit ко всем свойствам.

<p>
  This paragraph has <em>emphasized text</em>, <strong>strong text</strong>, and
  <a href="#">a link to top</a>.
</p>
<p>
  This paragraph has <em>emphasized text</em>, <strong>strong text</strong>, and
  <a href="#">a link to top</a>.
</p>

CSS

Во втором абзаце вместо того, чтобы задавать отдельным свойствам значение inherit, мы задаём свойству all всех встроенных элементов значение inherit, чтобы все они получили вычисленные стили родительского элемента <p>.

p:nth-of-type(2) > * {
  all: inherit;
}

Результат

Обратите внимание, что встроенные элементы наследуют все свойства родительского элемента <p>, в том числе блочное значение свойства display абзаца. Вероятно, это не тот результат, которого вы хотели бы добиться.

Исключение выбранных элементов из правила

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

HTML

Мы добавляем содержимое с семантической структурой.

<header>
  <h1>This is my blog</h1>
  <h2>This is the subtitle of my blog in the HEADER</h2>
  <p>My blog is not very interesting</p>
</header>
<main>
  <h2>This first blog post in MAIN</h2>
  <p>I really have nothing to say.</p>
  <section>
    <h2>This second blog post is in a SECTION within MAIN</h2>
    <p>
      It is in a section because it is important even though it isn't the least
      bit interesting.
    </p>
  </section>
</main>
<footer>
  <h2>Contact in FOOTER</h2>
  <p>Find me on Mastodon</p>
  <section>
    <h2>Copyright in SECTION within FOOTER</h2>
    <p>1996</p>
  </section>
</footer>

CSS

Мы задаём цвет текста элемента <main> как blue, а для всех элементов <h2> задаём шрифт green в monospace. Для элементов <h2> внутри <section> задаём значение inherit, чтобы они наследовали цвет текста родительского элемента.

main {
  color: blue;
}

h2 {
  color: green;
  font-family: monospace;
}

section h2 {
  color: inherit;
}

Результат

Все элементы <h2> имеют цвет green. Однако, если они вложены в элемент <section>, они наследуют цвет от родительского элемента, который находится внутри <main> и имеет цвет blue. В остальных случаях цвет текста по умолчанию — чёрный.

Спецификации

Совместимость с браузерами

См. также

• ключевые слова initial, revert, revert-layer, revert-rule и unset
• Наследование