So verwenden Sie den von CSS abgeleiteten Selektor

So verwenden Sie von CSS abgeleitete Selektoren: Abgeleitete Selektoren ermöglichen die Bestimmung des Stils eines bestimmten Tags basierend auf dem Kontext des Dokuments. Durch die rationale Verwendung abgeleiteter Selektoren kann der HTML-Code sauberer gestaltet werden.

(Empfohlenes Tutorial: CSS-Video-Tutorial)

<strong>So verwenden Sie von CSS abgeleitete Selektoren:

Indem Sie Stile basierend auf dem Kontext eines Elements an seiner Position definieren, können Sie Ihr Markup prägnanter gestalten .

In CSS1 werden Selektoren, die Regeln auf diese Weise anwenden, als kontextuelle Selektoren bezeichnet, da sie auf den Kontext angewiesen sind, um eine Regel anzuwenden oder zu vermeiden. In CSS2 werden sie abgeleitete Selektoren genannt, aber egal wie Sie sie nennen, sie bewirken dasselbe.

Mit abgeleiteten Selektoren können Sie ein Tag basierend auf dem Kontext des Dokuments formatieren. Durch die sinnvolle Verwendung abgeleiteter Selektoren können wir unseren HTML-Code sauberer gestalten.

Wenn Sie beispielsweise möchten, dass das starke Element in der Liste kursiv statt wie üblich fett dargestellt wird, können Sie einen abgeleiteten Selektor wie folgt definieren:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Bitte beachten Sie den Kontext des mit <strong> gekennzeichneten blauen Codes:

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

Im obigen Beispiel ist nur das starke Element im li-Element kursiv dargestellt. Es ist nicht erforderlich, eine spezielle Klasse oder ID für das starke Element zu definieren, und der Code ist prägnanter.

Schauen Sie sich noch einmal die folgende CSS-Regel an:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Hier ist der HTML-Code, den es betrifft:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den von CSS abgeleiteten Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!