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

本文为大家分享了CSS中常用的四种选择器，供大家参考，具体内容如下

1、类选择器（class选择器）

基本使用：

      .类选择器{

            属性名: 属性值;

            ...

      }

案例：

CSS Code复制内容到剪贴板

1.      
2. .s1{     
3.     background-color: pink;     
4.     font-weight: bold;     
5.     font-size: 16px;     
6.     color: black;     
7. }     
8.   

2、id选择器

基本使用：

      #id选择器{

             属性名: 属性值;

             ...

      }

案例：

CSS Code复制内容到剪贴板

1.      
2. #id1{     
3.     background-color: silver;     
4.     font-size: 40px;     
5. }     

3、html元素选择器

      某个html元素{

             属性名: 属性值;

             ...

      }

 案例：

CSS Code复制内容到剪贴板

1. a:link{     
2.     color: black;     
3.     text-decoration: none;     
4.     font-size: 24px;     
5. }     
6. a:visited{     
7.     color: red;     
8. }     
9. a:hover{     
10.     color: green;     
11.     text-decoration: underline;     
12.     font-size: 40px;     
13. }     
14.      
15.      
16. p.cls1{     
17.     color:blue;     
18.     font-size:30px;     
19. }     
20. p.cls2{     
21.     color:red;     
22.     font-size:20px;     
23. }     
24.   

a 元素的效果为：

（1）默认样式是黑色，24px，没有下划线；

（2）当鼠标移动到超链接时，自动出现下划线；

（3）点击后，超链接变成红色。

p 元素的选择器在html中的使用，如：

XML/HTML Code复制内容到剪贴板

1. hello,world!hello,world!hello,world!
        
2. hello,html!hello,html!hello,html!
      

 4、通配符选择器

该选择器可以用到所有的html元素，但是其优先权最低

      *{

            属性名: 属性值;

            ...

      }

案例：

CSS Code复制内容到剪贴板

1.      
2. *{     
3.          
4.          
5.          
6.     margin:0px;     
7.     padding:0px;     
8. }     
9.   

四个选择器的优先权如下：

Id选择器 > class选择器 > html选择器 > 通配符选择器

选择器的细节问题！！！

1、父子选择器的使用

CSS Code复制内容到剪贴板

1.      
2.      
3. #id1 span{     
4.     color: red;     
5.     font-style:italic;     
6. }     
7.      
8. #id1 span span{     
9.     color:green;     
10. }     
11. #id1 span span a{     
12.     color:blue;     
13. }    

通过上面总结：

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

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

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

CSS Code复制内容到剪贴板

1. #id span span   
2.   
3. s1 #id span   
4.   
5. div #id s2   
6.   

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

案例：

TestId 

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

使用方法如下：

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

案例：

CSS Code复制内容到剪贴板

1.      
2. .s1{     
3.     background-color: pink;     
4.     font-weight: bold;     
5.     font-size: 16px;     
6.     color: black;     
7. }     
8.      
9. .cls1{     
10.     font-style:italic;     
11.     text-decoration:underline;     
12. }    

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

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

CSS Code复制内容到剪贴板

1.      
2. .ad_stu{     
3.     width:136px;     
4.     height:196px;     
5.     background-color:#FC7E8C;     
6.     margin:5px 0 0 6px;     
7.     float:left;     
8. }     
9.      
10.      
11. .ad_2{     
12.     background:#7CF574;     
13.     height:196px;     
14.     width:457px;     
15.     float:left;     
16.     margin:5px 0 0 6px;     
17. }     
18.      
19.      
20. .ad_house{     
21.     background:#7CF574;     
22.     height:196px;     
23.     width:152px;     
24.     float:left;     
25.     margin:5px 0 0 6px;     
26. }     
27. //上面的CSS可以写成   
28.   

CSS Code复制内容到剪贴板

1.      
2. .ad_stu{     
3.     width:136px;     
4.     background-color:#FC7E8C;     
5. }     
6.      
7.      
8. .ad_2{     
9.     background:#7CF574;     
10.     height:196px;     
11.     width:457px;     
12. }     
13.      
14.      
15. .ad_house{     
16.     background:#7CF574;     
17.     height:196px;     
18.     width:152px;     
19. }     
20.      
21. .ad_stu, .ad_2, .ad_house{     
22.     height:196px;     
23.     margin:5px 0 0 6px;     
24.     float:left;     
25. }    

5、CSS文件本身也会被浏览器从服务器下载到本地，才能显示效果。

以上就是四种CSS常用的选择器使用方法和注意事项，希望对大家的学习有所帮助。