ホームページ > 記事 > ウェブフロントエンド > CSSコンテキストセレクターにはどのような種類がありますか?
CSSコンテキストセレクターにはどのような種類がありますか?
- 青灯夜游オリジナル
- 2022-01-20 10:43:021891ブラウズ
CSS コンテキスト セレクターには 4 つのタイプがあります: 1. 現在の要素のすべての子孫要素を選択できる子孫セレクター; 2. 現在の要素のすべての子要素を選択できる親子セレクター; 3. . 兄弟セレクター 隣接セレクターは、共通の親を持つ隣接する要素を選択できます; 4. 同じレベルのすべてのセレクターは、共通の親を持つ後続の要素をすべて選択できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css のコンテキスト セレクター
コンテキスト セレクターは、「親子」つまり階層関係を構成する要素のグループであり、その関係によってスタイルが設定されます
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。