inherit

Beispiele

Grundlegende Verwendung

In diesem Beispiel demonstrieren wir die Wirkung des inherit Schlüsselworts, indem wir zwei Absätze mit verschachtelten Elementen vergleichen: Die Inline-Elemente in einem verwenden ihre Browser-Standardstile, während die in dem anderen einzelne Eigenschaftswerte von ihrem Elternteil erben.

HTML

Wir fügen zwei identische Absätze mit mehreren Inline-Elementen ein.

<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

Wir stylen die Inline-Elemente im ersten Absatz nicht, sodass sie ihre Standard-Browserstile verwenden. Im zweiten Absatz setzen wir Eigenschaften auf jedem Inline-Element auf inherit, damit sie die berechneten Stile vom übergeordneten <p> Element übernehmen.

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

Ergebnis

Erben aller Eigenschaftswerte

In diesem Beispiel verwenden wir denselben HTML-Code wie im vorherigen Beispiel, um die Probleme zu demonstrieren, die auftreten können, wenn das inherit Schlüsselwort auf alle Eigenschaften angewendet wird.

<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

Im zweiten Absatz setzen wir nicht einzelne Eigenschaften auf inherit, sondern die all Eigenschaft auf allen Inline-Elementen auf inherit, damit sie alle berechneten Stile vom übergeordneten <p> Element übernehmen.

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

Ergebnis

Beachten Sie, wie das Inline-Element alle Eigenschaften des übergeordneten <p> erbt, einschließlich des block-level display Werts des Absatzes. Dies ist wahrscheinlich nicht das gewünschte Ergebnis.

Ausgewählte Elemente von einer Regel ausschließen

Dieses Beispiel demonstriert, wie das inherit Schlüsselwort verwendet werden kann, um ausgewählte Elemente von einer Farbregel auszuschließen, sodass sie stattdessen die Farbe ihres übergeordneten Elements verwenden.

HTML

Wir fügen etwas semantisch strukturierten Inhalt ein.

<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

Wir setzen die Textfarbe des <main> Elements auf blue und alle <h2> Elemente auf green in monospace Schriftart. Die <h2> Elemente innerhalb eines <section> erben die Textfarbe ihres übergeordneten Elements.

main {
  color: blue;
}

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

section h2 {
  color: inherit;
}

Ergebnis

Die <h2> Elemente sind alle green. Wenn sie jedoch in einem <section> Element verschachtelt sind, erben sie ihre Farbe von ihrem Elternteil, was innerhalb von <main> blue ist. Die Standardtextfarbe ist sonst schwarz.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• initial, revert, revert-layer, und unset Schlüsselwörter
• Vererbung