css选择器

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），不包括孙节点。