1.后代选择器
1.1语法:选择器1 选择器2 {属性:属性值};如:选中哈密瓜 .a2 .b {color:red};
<div class="a2">
<div>
<ul>
<li> <span>手机</span> </li>
<li>苹果 </li>
<li>香蕉</li>
<div class="b">哈密瓜</div>
</ul>
</div>
</div>
1.2一个父元素包含多个后代元素时,后代元素会受到父元素影响,(包含关系)a标签除外
<style>
.a2 ul{
color: green;
}
</style>
<div class="a2">
<div>
<ul>
<li><span>手机</span> </li>
<li>苹果 </li>
<li>香蕉</li>
<a href="">百度</a>
<div class="b">哈密瓜</div>
</ul>
</div>
</div>
选中a2,改变其颜色,其后代元素的颜色也会随之改变,a元素除外。
2.子代选择器
2.1语法:选择器1>选择器2 {属性:属性值}; 如:.ulist>li>span { color: red; }
<style>
.ulist>li>span {
color: red;
}
</style>
<div class="box">
<ul class="ulist">
<li>台式机</li>
<li> <span>笔记本</span> </li>
<li>平板</li>
<li>手机</li>
<li>服务器</li>
</ul>
</div>
注意 :
1. 选择器1和2之间必须是亲父关系
3.并集选择器
3.1语法:选择器,选择器 {属性:属性值}; (用逗号链接 不能有空格)
<style>
/* 需求 : p h2 box2里的a标签都变成粉色背景 */
.box1 p,h2,.box2 a {
background-color: pink;
}
</style>
<div class="box1">
<p>这是box1里面的p</p>
<a href="">box1的啊</a>
</div>
<div class="box2">
<a href="">这box的a</a>
<span>span标签</span>
</div>
<h2>这是h2</h2>
</div>