四种CSS常用的选择器使用方法和注意事项

（1）父子选择器可以有多级（但是在实际开发中，建议不要超过三层）；

（2）父子选择器有严格的层级关系；

（3）父子选择器不局限于什么类型选择器，比如

CSS Code复制内容到剪贴板

#id span span   
  
s1 #id span   
  
div #id s2   
  

2、一个元素可以同时有id选择器和类选择器（但是id选择器不可以有多个）

案例：

<span class="s1" id="tid">TestId</span> 

3、一个元素最多有一个id选择器，但是可以有多个类选择器

使用方法如下：

<元素 class=”类选择器1 类选择器2”>内容</元素>

案例：

CSS Code复制内容到剪贴板

/*类选择器1*/     
.s1{     
    background-color: pink;     
    font-weight: bold;     
    font-size: 16px;     
    color: black;     
}     
/*再配置一个类选择器2*/     
.cls1{     
    font-style:italic;     
    text-decoration:underline;     
}    

（注：这里需要注意的是，当同时使用多个类选择器且类选择器中的样式发生冲突时，以CSS文件中最尾的类选择器的样式为准，不依赖于html文件中的类选择器的放置顺序。）

4、我们可以把某个CSS文件中的选择器共有的部分，独立出来写成一份。比如：

CSS Code复制内容到剪贴板

/*招生广告*/     
.ad_stu{     
    width:136px;     
    height:196px;     
    background-color:#FC7E8C;     
    margin:5px 0 0 6px;     
    float:left;     
}     
     
/*广告2*/     
.ad_2{     
    background:#7CF574;     
    height:196px;     
    width:457px;     
    float:left;     
    margin:5px 0 0 6px;     
}