4种CSS常见的挑选器应用方式和留意事项

日期:2021-03-18 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

本文为大伙儿共享了CSS中常见的4种挑选器,供大伙儿参照,实际內容以下

1、类挑选器(class挑选器)

基础应用:

      .类挑选器{

            特性名: 特性值;

            ...

      }

实例:

CSS Code拷贝內容到剪贴板
  1. /*类挑选器*/     
  2. .s1{     
  3.     background-color: pink;     
  4.     font-weightbold;     
  5.     font-size16px;     
  6.     colorblack;     
  7. }     
  8.   

2、id挑选器

基础应用:

      #id挑选器{

             特性名: 特性值;

             ...

      }

实例:

CSS Code拷贝內容到剪贴板
  1. /*id挑选器的应用*/     
  2. #id1{     
  3.     background-colorsilver;     
  4.     font-size40px;     
  5. }     

3、html元素挑选器

      某个html元素{

             特性名: 特性值;

             ...

      }

 实例:

CSS Code拷贝內容到剪贴板
  1. a:link{     
  2.     colorblack;     
  3.     text-decorationnone;     
  4.     font-size24px;     
  5. }     
  6. a:visited{     
  7.     colorred;     
  8. }     
  9. a:hover{     
  10.     colorgreen;     
  11.     text-decorationunderline;     
  12.     font-size40px;     
  13. }     
  14.      
  15. /*对同1种html元素归类*/     
  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. <p class="cls1">hello,world!hello,world!hello,world!</p>     
  2. <p class="cls2">hello,html!hello,html!hello,html!</p>   

 4、通配符挑选器

该挑选器能够用到全部的html元素,可是其优先选择权最低

      *{

            特性名: 特性值;

            ...

      }

实例:

CSS Code拷贝內容到剪贴板
  1. /*通配符挑选器*/     
  2. *{     
  3.     /*margin-top:0px;   
  4.     margin-left:0px;*/     
  5.     /*margin: 10px 30px 40px 1px;*/     
  6.     /*margin 能够写1个值,(上右下左(顺时针))假如是两个值(左右,上下)   
  7.     假如是是3个值(上,上下,下)*/     
  8.     margin:0px;     
  9.     padding:0px;     
  10. }     
  11.   

4个挑选器的优先选择权以下:

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

挑选器的细节难题!!!

1、父子挑选器的应用

CSS Code拷贝內容到剪贴板
  1. /*父子挑选器*/     
  2. /*对id挑选器为#id1下的span元素界定款式*/     
  3. #id1 span{     
  4.     colorred;     
  5.     font-style:italic;     
  6. }     
  7. /*对id挑选器为#id1下的span元素下的span元素界定款式*/     
  8. #id1 span span{     
  9.     color:green;     
  10. }     
  11. #id1 span span a{     
  12.     color:blue;     
  13. }    

根据上面总结:

(1)父子挑选器能够有多级别(可是在具体开发设计中,提议不必超出3层);

(2)父子挑选器有严苛的等级关联;

(3)父子挑选器不局限于甚么种类挑选器,例如

CSS Code拷贝內容到剪贴板
  1. #id span span   
  2.   
  3. s1 #id span   
  4.   
  5. div #id s2   
  6.   

2、1个元素能够另外有id挑选器和类挑选器(可是id挑选器不能以有好几个)

实例:

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

3、1个元素数最多有1个id挑选器,可是能够有好几个类挑选器

应用方式以下:

<元素 class=”类挑选器1 类挑选器2”>內容</元素>

实例:

CSS Code拷贝內容到剪贴板
  1. /*类挑选器1*/     
  2. .s1{     
  3.     background-color: pink;     
  4.     font-weightbold;     
  5.     font-size16px;     
  6.     colorblack;     
  7. }     
  8. /*再配备1个类挑选器2*/     
  9. .cls1{     
  10.     font-style:italic;     
  11.     text-decoration:underline;     
  12. }    

(注:这里必须留意的是,当另外应用好几个类挑选器且类挑选器中的款式产生矛盾时,以CSS文档中最尾的类挑选器的款式为准,不依靠于html文档中的类挑选器的置放次序。)


4、大家能够把某个CSS文档中的挑选器共有的一部分,单独出来写成1份。例如:

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. /*广告宣传2*/     
  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. /*广告宣传2*/     
  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文档自身也会被访问器从服务器免费下载到当地,才可以显示信息实际效果。

以上便是4种CSS常见的挑选器应用方式和留意事项,期待对大伙儿的学习培训有一定的协助。

上一篇:深层次分析CSS中的自定特性 返回下一篇:没有了