CSS 的选择器有很多，常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。
本篇博客说的是子代选择器，详细内容如下
文章目录
子代选择器
与后代选择器不同，子代选择器只选择父级元素的亲一代。
1：写法
在父级元素的后面，加上一个 > 符号（大于号），表示这是亲一代，后面再写上子级元素即可。如下图所示
2：举例说明
如下代码所示
<body>
<ul>
<li>
<p>一级菜单</p>
<div>
<p>二级菜单</p>
</div>
</li>
</ul>
</body>
题目要求
将一级菜单的文本颜色设置为蓝色。
分析
如果你用后代选择器，不仅"一级菜单"的文本颜色会被改为蓝色，下面的二级菜单也会被改变。显然这不符合题目要求，我们需要选中的是 li 元素的 p 元素，而不是 li 元素中 div 元素的 p 元素，所以这里用子代选择器。
CSS 代码如下
ul li>p {
color: blue;
}
浏览器运行效果如下
3：后代、子代选择器的区别
| 后代选择器 | 子代选择器 |
|---|---|
| 后代选择器选中的是指定元素的所有后代，父子级之间用空格连接 | 子代选择器只选中父级元素的亲一代，父子级之间用 > 号连接 |
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。
结束语
