选择CSS常用选择器的方法

编辑作者:www.789mux.com    在线用户:23    标签: css    html    sp    元素   

CSS中常用的选择器有非常多,但是有很多人在都不知道该如何进行选择,下面爱站小编为大家介绍关于选择CSS常用选择器的方法,感兴趣的朋友们get起来吧。

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

基本使用:

      .类选择器{

            属性名: 属性值;

            ...

      }

案例:

CSS Code复制内容到剪贴板
    css
  1. ">

  2. /*类选择器*/

  3. .s1{     

  4.     background-color: pink;     

  5.     font-weightbold;     

  6.     font-size16px;     

  7.     colorblack;     

  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. /*对同一种html元素分类*/

  15. p.cls1{     

  16.     color:blue;     

  17.     font-size:30px;     

  18. }     

  19. p.cls2{     

  20.     color:red;     

  21.     font-size:20px;     

  22. }     

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 可以写一个值,(上右下左(顺时针))如果是两个值(上下,左右) 

  7.     如果是是三个值(上,左右,下)*/

  8.     margin:0px;     

  9.     padding:0px;     

  10. }     

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

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)父子选择器可以有多级(但是在实际开发中,建议不要超过三层);

(2)父子选择器有严格的层级关系;

(3)父子选择器不局限于什么类型选择器,比如

CSS Code复制内容到剪贴板
  1. #id span span   

  2. s1 #id span   

  3. div #id s2   

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-weightbold;     

  5.     font-size16px;     

  6.     colorblack;     

  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:5px 0 0 6px;     

  7.     float:left;     

  8. }     

  9. /*广告2*/

  10. .ad_2{     

  11.     background:#7CF574;     

  12.     height:196px;     

  13.     width:457px;     

  14.     float:left;     

  15.     margin:5px 0 0 6px;     

  16. }     

  17. /*房地产广告*/

  18. .ad_house{     

  19.     background:#7CF574;     

  20.     height:196px;     

  21.     width:152px;     

  22.     float:left;     

  23.     margin:5px 0 0 6px;     

  24. }     

  25. //上面的CSS可以写成   

CSS Code复制内容到剪贴板
  1. /*招生广告*/

  2. .ad_stu{     

  3.     width:136px;     

  4.     background-color:#FC7E8C;     

  5. }     

  6. /*广告2*/

  7. .ad_2{     

  8.     background:#7CF574;     

  9.     height:196px;     

  10.     width:457px;     

  11. }     

  12. /*房地产广告*/

  13. .ad_house{     

  14.     background:#7CF574;     

  15.     height:196px;     

  16.     width:152px;     

  17. }     

  18. .ad_stu, .ad_2, .ad_house{     

  19.     height:196px;     

  20.     margin:5px 0 0 6px;     

  21.     float:left;     

  22. }    

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

这篇文章主要介绍了选择CSS常用选择器的方法及注意事项,内容还包含了CSS选择器的优先级,感兴趣的小伙伴们可以参考一下

请发表您的评论