CSS の基礎学習 8: 派生 Selector_html/css_WEB-ITnose

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

CSS1 では、この方法でルールを適用するセレクターは、

コンテキスト関係に依存して特定のルールを適用または回避するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも、その効果は同じです。派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、

HTML コードをよりクリーンにすることができます。コードのコンテキスト。コードはより簡潔になります。

実行の結果を確認できます:

次に、一般的な派生セレクターを見てみましょう。

子孫セレクターは、要素の子孫である要素を選択します。要素の子孫である要素を選択し、いくつかの

スタイルを設定します。

上の例は、標準の子孫セレクターのデモンストレーションです。法语 (2) 文法解釈

子孫の子孫では、ルールの左側のセレクターにスペースを含むセレクターが 2 つ以上含まれています。セレクター間のスペースは、

文字と

文字の組み合わせです。各スペース コンビネータは、「... で見つかった...」、「... の一部として」、「... の子孫として」と解釈できますが、要件は右から順に行う必要があります。

セレクターを読み取ります。構文: セレクター selector [selector...] {}。子孫セレクターの見落とされがちな側面は、2 つの要素間の階層間隔

が無限になる可能性があることです。 1 時間、例: H1 SPAN {} H1 にネストされたスパン

<span style="font-size:18px;">li strong {    font-style: italic;    font-weight: normal;  }</span>

が実行されます:

(3) 複雑なセレクターを組み合わせた子孫の子孫: .test img {} と#header .btn{} など子要素の選択 (子セレクター) は、子孫と比較して、特定の要素の要素要素として機能することのみを選択できます。子孫セレクターよりも厳密で、特定の要素の子である要素を選択し、いくつかのスタイルを設定します。子要素 (1) 子要素を選択します

子要素を選択したくないが、範囲を狭め、特定の要素の子要素のみを選択したい場合は、子要素セレクターを使用してください。

たとえば、h1 要素の子である強い要素のみを選択したい場合は、次のように書くことができます:

<span style="font-size:18px;"><p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol></span>

このルールは、最初の h1 の下にある強い要素を赤にしますが、2 番目の強い要素は影響を受けません:

<span style="font-size:18px;"><span style="font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title></span></span>