CSS派生セレクターの使い方

CSS 派生セレクターの使用方法: 派生セレクターを使用すると、ドキュメントのコンテキストに基づいて特定のタグのスタイルを決定できます。派生セレクターを合理的に使用することで、HTML コードをよりクリーンにすることができます。

(推奨チュートリアル: css ビデオ チュートリアル)

CSS 派生セレクターの使用方法:

要素の位置のコンテキストに基づいてスタイルを定義すると、マークアップをより簡潔にすることができます。

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

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

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

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

マークは<strong></strong> 青色のコードのコンテキスト:

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

上の例では、li 要素内の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 サイトの他の関連記事を参照してください。