四种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. }

2、id选择器

基本使用：

#id选择器{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板
  1. /*id选择器的使用*/
  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. }
  15. /*对同一种html元素分类*/
  16. p.cls1{
  17. color:blue;
  18. font-size:30px;
  19. }
  20. p.cls2{
  21. color:red;
  22. font-size:20px;
  23. }

a 元素的效果为：

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

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <pclass="cls1">hello,world!hello,world!hello,world!</p>
  2. <pclass="cls2">hello,html!hello,html!hello,html!</p>

4、通配符选择器

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

*{

属性名: 属性值;

...

}

案例：

CSS Code复制内容到剪贴板
  1. /*通配符选择器*/
  2. *{
  3. /*margin-top:0px;
  4. margin-left:0px;*/
  5. /*margin:10px30px40px1px;*/
  6. /*margin可以写一个值，（上右下左（顺时针））如果是两个值（上下，左右）
  7. 如果是是三个值（上，左右，下）*/
  8. margin:0px;
  9. padding:0px;
  10. }

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

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

选择器的细节问题！！！

1、父子选择器的使用

CSS Code复制内容到剪贴板
  1. /*父子选择器*/
  2. /*对id选择器为#id1下的span元素定义样式*/
  3. #id1span{
  4. color:red;
  5. font-style:italic;
  6. }
  7. /*对id选择器为#id1下的span元素下的span元素定义样式*/
  8. #id1spanspan{
  9. color:green;
  10. }
  11. #id1spanspana{
  12. color:blue;
  13. }

通过上面总结：

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

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

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

CSS Code复制内容到剪贴板
  1. #idspanspan
  3. s1#idspan
  5. div#ids2

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

案例：

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

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

使用方法如下：

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

案例：

CSS Code复制内容到剪贴板
  1. /*类选择器1*/
  2. .s1{
  3. background-color:pink;
  4. font-weight:bold;
  5. font-size:16px;
  6. color:black;
  7. }
  8. /*再配置一个类选择器2*/
  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:5px006px;
  7. float:left;
  8. }
  10. /*广告2*/
  11. .ad_2{
  12. background:#7CF574;
  13. height:196px;
  14. width:457px;
  15. float:left;
  16. margin:5px006px;
  17. }
  19. /*房地产广告*/
  20. .ad_house{
  21. background:#7CF574;
  22. height:196px;
  23. width:152px;
  24. float:left;
  25. margin:5px006px;
  26. }
  27. //上面的CSS可以写成
CSS Code复制内容到剪贴板
  1. /*招生广告*/
  2. .ad_stu{
  3. width:136px;
  4. background-color:#FC7E8C;
  5. }
  7. /*广告2*/
  8. .ad_2{
  9. background:#7CF574;
  10. height:196px;
  11. width:457px;
  12. }
  14. /*房地产广告*/
  15. .ad_house{
  16. background:#7CF574;
  17. height:196px;
  18. width:152px;
  19. }
  21. .ad_stu,.ad_2,.ad_house{
  22. height:196px;
  23. margin:5px006px;
  24. float:left;
  25. }

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例