<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1{
width:100px；
height:100px;
background-color:blue;
}
div span{ <!--后代选择器之间用空格空开 包含儿子也包含孙子-->
color: green;
background-color:red;
}
#p1 div{
color:red;
}
</style>
</head>
<body>
<div>
<span>div下的span标签</span>
</div>
<div class="d1">
<span>div下的span标签33333</span>
</div>
<span id="p1">
<div>span下的div(不可行)</div>
</span>
<div>
<p>
<span class="d1">div下的p的span</span>
</p>
</div>
</body>
</html>
1，作用：选中指定元素，符合要求的后代元素
2，语法：选择器1 选择器2 ... 选择器n{}（先写祖先，再写后代），选择器之间用空格隔开
3，注意：
（1）后代选择器，最终选择的是后代，不选中祖先
（2）儿子，孙子，重孙子，都算是后代
（3）结构一定要符合之前讲的HTML嵌套要求，例如，不能p中写h1-h6
（4）后代选择器后面可以接并集选择器和其他的选择器
4，代码演示
<style>
ul li {
color: red;
}
ol li {
color: green;
}
ul li a{
color: orange;
}
ol li a{
color: gray;
}
.subject li#front-end {
color: blue;
}
.subject div.front-end{
color: red;
}
p h2{
color: red;
}
</style>
</head>
<body>
<ul>
<li>抽烟</li>
<li>喝酒</li>
<li>
<a href="#">烫头</a>
</li>
<div>
<li>踢球</li>
</div>
</ul>
<hr>
<ol>
<li>张三</li>
<li>李四</li>
<li>
<a href="#">王五</a>
</li>
</ol>
<ol class="subject">
<li id="front-end">前端</li>
<div class="front-end">学科介绍，学好前端，挂帅杨帆</div>
<li>java</li>
<li>大数据</li>
</ol>
<p>
<h2>你好</h2>
</p>
</body>
扫一扫
6489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
