首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1266
收藏 0 赞 0 分享

本文为大家分享了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. /*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. }     
  14.      
  15. /*对同一种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 可以写一个值，（上右下左（顺时针））如果是两个值（上下，左右）   
  7.     如果是是三个值（上，左右，下）*/     
  8.     margin:0px;     
  9.     padding:0px;     
  10. }     
  11.   

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

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

选择器的细节问题！！！

1、父子选择器的使用

CSS Code复制内容到剪贴板
  1. /*父子选择器*/     
  2. /*对id选择器为#id1下的span元素定义样式*/     
  3. #id1 span{     
  4.     color: red;     
  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.   
  3. s1 #id span   
  4.   
  5. div #id s2   
  6.   

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: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文件本身也会被浏览器从服务器下载到本地，才能显示效果。

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

更多精彩内容其他人还在看

css实现的让图片垂直居中的方法

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。
收藏 0 赞 0 分享

3个比较有用的网页制作技巧

我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！
收藏 0 赞 0 分享

让你写出更轻巧、更快并且更不会让你头疼的CSS的方法

为什么我们的CSS变得一团糟——我们真的很容易陷入这样的困惑中。有时这是一开始就马虎编程的结果，有时是由于后期多重的附加代码（hacks)和修改造成的。
收藏 0 赞 0 分享

利用CSS3的checked伪类实现OL的隐藏显示的方法

随着CSS3的发布，国外研究正如火如荼，但在国内还有很多人抱着IE不支持CSS3的想法，始终无动于衷不肯去学习。
收藏 0 赞 0 分享

CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。
收藏 0 赞 0 分享

固定位置显示弹出层(兼容IE6,IE8,FF)

兼容IE6,IE8,FF弹出层固定位置显示,主要是通过css的控制
收藏 0 赞 0 分享

div完美自适应动态上下左右居中

div完美自适应动态上下左右居中，多用于信息提示框效果。
收藏 0 赞 0 分享

display:inline的用法

和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了
收藏 0 赞 0 分享

css样式实现整个页面背景使用一张图片

最近一直被css背景困扰，因为是仿站，别人网站背景图片无论怎样另存，都是相同文件名，打开一看，整个网站的各个角落背景图片都在一个文件中分布，于是上网搜集资料，发现使用这种方法的网站很多，源自于雅虎最早。
收藏 0 赞 0 分享

关于CSS样式表文件组织形式的整理

以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22