ホームページ > 記事 > ウェブフロントエンド > CSSコンテキストセレクターにはどのような種類がありますか?
CSS コンテキスト セレクターには 4 つのタイプがあります: 1. 現在の要素のすべての子孫要素を選択できる子孫セレクター; 2. 現在の要素のすべての子要素を選択できる親子セレクター; 3. . 兄弟セレクター 隣接セレクターは、共通の親を持つ隣接する要素を選択できます; 4. 同じレベルのすべてのセレクターは、共通の親を持つ後続の要素をすべて選択できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
コンテキスト セレクターは、「親子」つまり階層関係を構成する要素のグループであり、その関係によってスタイルが設定されます
html ドキュメントは逆さまの「ツリー」のように見えるため、階層構造になっています。
ドキュメント内のすべての要素には独自の位置があり、つまり、コンテキスト関係
#したがって、要素のコンテキスト関係に基づいてそれらを取得できます。要素の役割
シリアル番号
##1 | ||
---|---|---|
2 | 親要素 | |
3 | 子孫要素 | |
4 | 子要素 | |
#4 種類のコンテキスト セレクター |
SelectorOperator
1 | 子孫セレクター | |||
---|---|---|---|---|
div p | ,body *
|
#2 |
親子セレクター > |
|
div > h2 |
| 3兄弟隣接セレクター |
|
|
#li.red li | ##4 | すべてのセレクターが同じレベルにあります
##共通の親を持つ後続の要素をすべて選択します |
||
例 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>上下文选择器</title> <style> .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 类选择器 */ .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 后代选择器 */ .container div { border: 1px solid coral; } /* 父子选择器,只有外层的div受影响 */ body > div { border: 3px solid green; } /* 使用后代选择器模拟父子选择器 */ /* body div.container { border: 3px solid green; } */ /* 同级相邻选择器 */ /* 选择与第5个相邻的,即后面的"一个"元素 */ /* .item.center + .item { background-color: lightgreen; } */ /* 同级所有选择器 */ /* 选择与第5个后面的,有共同父级的所有兄弟元素 */ .item.center ~ .item { background-color: lightgreen; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div class="item center">5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html> (学習ビデオ共有: css ビデオ チュートリアル | )
以上がCSSコンテキストセレクターにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。