0. css层
层叠样式的规则:行内样式 > ID样式 > 类别样式 > 标记样式
1. 类别选择器叠特性
.s1{color:#FF0000;}
2. 标签选择器
p{color:090;}
3. ID选择器
#s1{color:#FF0000;}
4. “交集”选择器(中间没有空格)
<style>
.s1{font-size: 25px;}
.s2{color:red;}
.s1.s2{text-decoration: underline;} /*交集选择器,中间没有空格*/
</style>
<div>
<span class="s1">111</span><br><br>
<span class="s2">222</span><br><br>
<span class="s1 s2">333</span><br><br>
</div>
说明:交集选择器中间没有空格,第三个span标签保留s1、s2的属性,同时拥有了下划线(text-decoration: underline;)属性。
5. “并集”选择器
<style>
.s1{font-size: 25px;}
.s2{color:red;}
.s1, .s2{text-decoration: underline;} /*并集选择器,用逗号隔开,中间空格可有可无*/
</style>
<div>
<span class="s1">111</span><br><br>
<span class="s2">222</span><br><br>
</div>
说明:并集选择器中间空格可有可无,相当于给多个元素同时设置属性。
6. 后代选择器
<style>
.d1 span{font-size: 25px;color:red;}
</style>
<div class="d1">
<span>111</span><br>
<div>
<span>222</span><br>
</div>
<span>333</span><br>
</div>
说明:.d1 span{}表示class="d1"下面所有的span(包括111、222、333),包括子孙后代。
7. 子选择器
<style>
.d1 > span{font-size: 25px;color:red;}
</style>
<div class="d1">
<span>111</span><br>
<div>
<span>222</span><br>
</div>
<span>333</span><br>
</div>
说明:.d1 > span{}表示class="d1"下面所有的span第一级子节点(包括111、333),不包括孙节点。