教学视频来自html+css课程：55、后代、子代选择器_哔哩哔哩_bilibili
一、标签选择器：即通过标签名称进行选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>这是子标签1</p>
<p>这是子标签2</p>
<p>这是子标签3</p>
<p>这是子标签4</p>
<div>
<p>这是孙子标签1</p>
<p>这是孙子标签2</p>
<p>这是孙子标签3</p>
<p>这是孙子标签4</p>
<div>
<p>这是重孙子标签1</p>
<p>这是重孙子标签2</p>
<p>这是重孙子标签3</p>
<p>这是重孙子标签4</p>
</div>
</div>
</div>
</body>
</html>
/* 一、标签选择器 选择某元素的后代 */
div p {
/* 这是一个标签选择器，选择了所有div中的p标签，并渲染 */
color: red;
}
选择了所有div中的p标签进行渲染，导致所有的p标签都被渲染为红色。
二、后代选择器
利用id选择器的唯一特性，只选择了第一个div，并对其中的p标签进行渲染。这里必须要写“>”符号，才能只渲染father中的子标签，否则会渲染所有father以后的p标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="father">
<p>这是子标签1</p>
<p>这是子标签2</p>
<p>这是子标签3</p>
<p>这是子标签4</p>
<div>
<p>这是孙子标签1</p>
<p>这是孙子标签2</p>
<p>这是孙子标签3</p>
<p>这是孙子标签4</p>
<div>
<p>这是重孙子标签1</p>
<p>这是重孙子标签2</p>
<p>这是重孙子标签3</p>
<p>这是重孙子标签4</p>
</div>
</div>
</div>
</body>
</html> /* 二、子代选择器 选择某元素的后代 */
#father > p{
/* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
color: red;
}
下面的代码没有写“>”符号，导致渲染了所有father下的p标签。
/* 二、子代选择器 选择某元素的后代 */
#father p{
/* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
color: red;
}
三、后代选择器的嵌套使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="father">
<p>这是子标签1</p>
<p>这是子标签2</p>
<p>这是子标签3</p>
<p>这是子标签4</p>
<div>
<p>这是孙子标签1</p>
<p>这是孙子标签2</p>
<p>这是孙子标签3</p>
<p>这是孙子标签4</p>
<div>
<p>这是重孙子标签1</p>
<p>这是重孙子标签2</p>
<p>这是重孙子标签3</p>
<p>这是重孙子标签4</p>
</div>
</div>
</div>
</body>
</html>这里先选择其中一个后代，再通过“>”选择下一个后代，对p标签进行渲染。
/* 三、后代选择器可以进行嵌套使用 选择某元素的后代的后代，通过>符号进行连接，连续使用 */
#father > div > p{
/* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
color: red;
}
四、后代代选择器和标签选择器的混合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="father">
<p>这是子标签1</p>
<p>这是子标签2</p>
<p>这是子标签3</p>
<p>这是子标签4</p>
<div>
<p>这是孙子标签1</p>
<p>这是孙子标签2</p>
<p>这是孙子标签3</p>
<p>这是孙子标签4</p>
<div>
<p>这是重孙子标签1</p>
<p>这是重孙子标签2</p>
<p>这是重孙子标签3</p>
<p>这是重孙子标签4</p>
</div>
</div>
</div>
</body>
</html>先使用后代选择器选择需要渲染的后代，再使用标签选择器渲染该后代拥有的所有p标签。
/* 四、后代代选择器和标签选择器的混合使用 先使用后代选择器对需要渲染的后代进行选择，再通过标签选择器进行选择 */
#father > div p{
/* 利用id选择器的唯一性，对元素进行选择，选择该标签内的所有子标签 */
color: red;
}