1、复合选择器
<body>
<div class="red">我是div</div>
<h1 id="blue">我是h1</h1>
<p class="red a blue">我是p元素</p>
<h2>hhhhhh</h2>
<span>hahahhahaha</span>
</body>
(1)交集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2...选择器n{}
注意:交集选择器中如果有元素选择器,必须使用元素选择器开头
将class为red的div字体大小设置为30px
div.red{
font-size:30px;
}
(2)选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,...,选择器n{}
将h2和span中的元素设为粉色
h2,span{
color: hotpink;
}
2、关系选择器
<body>
<div class="box">
我是一个div
<span>我是div中的span元素</span>
<p>
我是div中的p元素
<span>
我是p元素中的span
</span>
</p>
<span>我是div中的span元素1</span>
<span>我是div中的span元素2</span>
<span>我是div中的span元素3</span>
<span>我是div中的span元素4</span>
</div>
<div>
<span>
我是第二个div外部的span
</span>
</div>
</body>
(1)子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
为div的子元素span设置字体颜色为红色
div.box>span{
color: red;
}
【注】div.box 则选中的是第一个div中的span
直接写div则会将第二个div中的span也选中
(2)后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先 后代
div中所有span的字体颜色都变为蓝色
div.box span{
color: blue;
}
【注】div.box 则选中的是第一个div中的span
直接写div则会将第二个div中的span也选中
(3)兄弟元素选择器
①作用:选择下一个紧挨着的兄弟
语法:前一个+下一个
p的下一个span设置为粉色
p+span.a{
color: hotpink;
}
【注】只有我是div中的span元素1会变为粉色
②作用:选中下边的所有兄弟
语法:兄~弟
p下边的所有span设为灰色
p~span{
color:grey;
}