CSS 派生セレクター

[はじめに] 派生セレクターを使用すると、要素の位置のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。 CSS1 では、この方法でルールを適用するセレクターは、コンテキストに依存して要素の位置に基づいて

派生セレクター

に応答するため、コンテキスト セレクターと呼ばれます。コンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。

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

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

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

li Strong {
font-style: italic;
font-weight: Normal;
}

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

私はリストに含まれていないため、斜体ではなく太字で表示されています。私には機能しません

1. 私の斜体。これは、strong 要素が li 要素の内側にあるためです。


2. 私は普通のフォントです。

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

次の CSS ルールを見てください:

strong {
color: red;
}

h2 {
color: red;
}

h2 Strong {
color: blue;
}

これがその様子です適用済み 影響を受ける HTML:

この段落で強く強調されている単語は赤色です。

この小見出しも赤色です。

< ;h2>この小見出しで強く強調されている単語は青です。

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