CSS 構文では、要素の位置のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。
CSS1 では、この方法でルールを適用するセレクターは、
コンテキスト関係に依存して特定のルールを適用または回避するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも、その効果は同じです。派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、
HTML コードをよりクリーンにすることができます。コードのコンテキスト。コードはより簡潔になります。
実行の結果を確認できます:
子孫セレクターは、要素の子孫である要素を選択します。要素の子孫である要素を選択し、いくつかの
スタイルを設定します。
上の例は、標準の子孫セレクターのデモンストレーションです。法语 (2) 文法解釈
子孫の子孫では、ルールの左側のセレクターにスペースを含むセレクターが 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>
<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">h1 span { color:red;} </style></head><body><h1>12345<span>12345</span></h1><span>12345</span><h1>12345<div><p><span>12345</div></p></span></h1></body></html></span></span>re 実行結果は次のとおりです:
(2) シントロフラリーの説明
子セレクターが数値より大きい (サブバインディング文字) を使用していることに気づいたはずです。サブコンジャンクションの両側に空白文字を含めることができますが、これはオプションです。したがって、
、次の記述は問題ありません:
<span style="font-size:18px;">h1 > strong {color:red;}</span>右から左に読むと、セレクター h1 >strong は「h1 要素の子であるすべての強い要素を選択する」と解釈できます。結合 (3) 子孫セレクターと子セレクターに基づいています
以下のセレクターを参照してください:
<span style="font-size:18px;"><h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></span>
以下のセレクターは、TD 要素のすべての P 要素を選択します。この TD 要素自体は、Table 要素から継承されます。 table 要素には会社を含む
クラス属性があります。
3 css隣接する兄弟セレクター- 。相选择 (1) 隣接する兄弟を選択します
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
<span style="font-size:18px;">h1 + p { color:#FF0000;}</span><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">h1 + p { color:#FF0000;}</style></head><body><h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p></body></html></span>运行的结果为：
(2)语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符。注释：与子结合符一样，相邻兄弟结合符旁边可以有空
白符。
请看下面这个文档树片段：
<span style="font-size:18px;"><div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol></div></span>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两
个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄
弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
<span style="font-size:18px;">li + li {font-weight:bold;}</span>上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
运行的结果为：(3)结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
<span style="font-size:18px;">html > body table + ul {margin-top:20px;}</span>这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，
body 元素本身是 html 元素的子元素。
版权声明：本文为博主原创文章，未经博主允许不得转载。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
