家族: 祖先、父親、兄弟、仲間
1. 祖先要素: マルチレベルの子孫を含む要素;
2. 親要素: 第 1 レベルの子要素のみを含む要素;
3. 隣接する要素:同じ親を持つ要素;
1. 子孫セレクター: まず祖先要素を検索し、次にその下にある指定された子孫要素をすべて選択します
構文: 祖先とターゲットをスペースで区切ります。複数の [Separated by] を使用します。スペース
形式: 祖先ターゲット {宣言}
2. 子セレクター: 最初に親要素を検索し、その下にあるすべての直接の子孫要素を選択します
構文: 親>ターゲット要素 {スタイル宣言}
3. 隣接セレクター: まず兄弟要素の開始点を決定し、後続の指定された要素をすべて選択します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
.art p {
/*color:red;*/
}
.art > p {
/*color: green;*/
}
.art h1+p {
/*只会将h1后面紧邻的p变色*/
/*color:blue; */
}
.art p+p {
clor: red;
}
</style>
</head>
<body>
<article>
<h1>php中文网</h1>
<p>永久免费的在线教学网站</p>
<p>将公益进行到底</p>
<p>为了情怀,为了梦想,为了更多像我这样的PHP爱好者</p>
<section>
<h2>如何学习前端</h2>
<p>一定要多动手多写笔记进行总结</p>
</section>
<section>
<h2>原来大家是这样学习的呀~~</h2>
</section>
</article>
<hr>
<ul>
<li>1列表项</li>
<li>2列表项</li>
<li>3列表项</li>
<li>4列表项</li>
<li>5列表项</li>
</ul>
</body>
</html>以上がCSSコンテキストセレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
