CSSコンテキストセレクターにはどのような種類がありますか?-フロントエンドQ&A-php.cn

CSSコンテキストセレクターにはどのような種類がありますか?

青灯夜游

リリース： 2022-01-20 10:43:08

オリジナル

1880 人が閲覧しました

CSS コンテキストセレクターには 4 つのタイプがあります: 1. 現在の要素のすべての子孫要素を選択できる子孫セレクター; 2. 現在の要素のすべての子要素を選択できる親子セレクター; 3. . 兄弟セレクター隣接セレクターは、共通の親を持つ隣接する要素を選択できます; 4. 同じレベルのすべてのセレクターは、共通の親を持つ後続の要素をすべて選択できます。

CSSコンテキストセレクターにはどのような種類がありますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css のコンテキストセレクター

コンテキストセレクターは、「親子」つまり階層関係を構成する要素のグループであり、その関係によってスタイルが設定されます

html ドキュメントは逆さまの「ツリー」のように見えるため、階層構造になっています。
ドキュメント内のすべての要素には独自の位置があり、つまり、コンテキスト関係
#したがって、要素のコンテキスト関係に基づいてそれらを取得できます。要素の役割

シリアル番号

役割説明先祖要素子要素、孫要素などを含むすべてのレベルに子孫要素があります。子要素レベルのみを持つ要素他のレベル要素とともに共通の祖先要素他の兄弟要素と共通の親要素を持つ#4 種類のコンテキストセレクターシリアル番号

		##1
	2	親要素
	3	子孫要素
	4	子要素

SelectorOperator

説明例1子孫セレクターSpace現在の要素のすべての子孫要素を選択します, #2 現在の要素のすべての子要素を選択3兄弟隣接セレクター共通の要素を持つ要素を選択します親であり、隣接している #li.red liすべてのセレクターが同じレベルにあります#li.red ~ li)


div p	body *	`親子セレクター`>
div > h2
	`##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 ビデオチュートリアル