CSS 派生セレクターは何によって定義されていますか?

CSS 派生セレクター

要素の位置のコンテキストに基づいてスタイルを定義すると、マークアップをより簡潔にすることができます。 (推奨学習: CSS ビデオ チュートリアル )

CSS1 では、この方法でルールを適用するセレクターは、コンテキストに応じてルールを適用または回避することに依存するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも同じことを行います。

派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、HTML コードをよりクリーンにすることができます。

たとえば、リスト内の強力な要素を通常の太字ではなく斜体にしたい場合は、次のように派生セレクターを定義できます:

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

とマークされた青色のコードのコンテキストに注意してください:

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li>
</ol>

上記の例では、li 要素内の Strong 要素のみが斜体でスタイル設定されており、strong 要素を斜体でスタイル設定する必要はありません。要素は特別なクラスまたは ID を定義し、コードをより簡潔にします。

次の CSS ルールをもう一度見てください:

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

影響を受ける HTML は次のとおりです:

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

以上がCSS 派生セレクターは何によって定義されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。