后代选择器
在某个标签后的所属所有特定标签
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>
<h1>h1</h1>
</span>
<ul>
<li>
<p>p4</p>
<h2>h2</h2>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
css代码：
ul li p{
background-color: deepskyblue;
}
测试访问：
子选择器
选中某个标签后直属的所有特定标签
html代码不变
css代码：
ul>li{
background-color: deepskyblue;
}
测试访问
相邻兄弟选择器
选中的标签后面的第一个同级该标签（两个标签必须是同种标签）
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<span>
<h1>h1</h1>
</span>
<ul>
<li>
<p>p4</p>
<h2>h2</h2>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
css代码
/*相邻兄弟选择器*/
.active +p{
background-color: deepskyblue;
}
测试访问
通用选择器
选中标签后的所有同级该标签
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>111</p>
<span>
<h1>h1</h1>
</span>
<ul>
<li>
<p>p4</p>
<h2>h2</h2>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
css代码
/*通用选择器*/
.active~p{
background-color: deepskyblue;
}
测试访问
