语法
子元素选择器的语法如下：
div>ul{color：red；}
子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素
后代选择器的语法如下：
h1 em{color:red;}
后代选择器可以选择作为某元素后代的元素,父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
二者区别：
我们通过一个实例来讲解子选择器与后代选择器的区别
先来看一下后代选择器div p的效果
<##ads_in_article_manong##>
<!DOCTYPE html>
<html>
<head>
<style>
div p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p>
<span><p>后代选择器</p></span>
</div>
</body>
</html>
运行结果如图：
![\"css](\"/images/css_1075_1.png\")
再来看一下子选择器div p的效果
<!DOCTYPE html>
<html>
<head>
<style>
div>p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p>
<span><p>后代选择器</p></span>
</div>
</body>
</html>
运行结果如图：
![\"css](\"/images/css_1075_2.png\")
从上面实例可以看出子选择器只作用于其第一代元素，而后代选择器作用于N（N为自然数）代元素。
继续阅读与本文标签相同的文章
-
他让我国芯片研究停滞13年，还骗走11亿研发资金，现状如何？
2026-05-14栏目： 教程
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目： 教程
-
5G套餐曝光遭“吐槽”，iphone11受追捧，导致苹果11销量比较高
2026-05-14栏目： 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾？
2026-05-14栏目： 教程
-
当水乡建筑遇上机器人，成就乌镇又一网红景点
2026-05-14栏目： 教程