Wodurch wird der von CSS abgeleitete Selektor definiert?

CSS-abgeleitete Selektoren

Sie können Markup prägnanter gestalten, indem Sie Stile basierend auf dem Kontext eines Elements an seiner Position definieren. (Empfohlenes Lernen: CSS-Video-Tutorial)

In CSS1 werden Selektoren, die Regeln auf diese Weise anwenden, als kontextuelle Selektoren bezeichnet, da sie abhängig vom Anwenden oder Vermeiden einer Regel je nach Kontext sind. 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 8e99a69fbe029cd4e2b854e244eab143 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 geschrieben, es ist nicht erforderlich, das starke Element zu verwenden Das Element definiert eine spezielle Klasse oder ID, wodurch der Code prägnanter wird.

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 vonWodurch wird der von CSS abgeleitete Selektor definiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!