码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器

时间:2015-06-21 23:49:32      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:css   html   标签   

 

       在这里主要总结了三个较为常用的选择器,熟练掌握这些选择器的使用,能够灵活地处理网页,作为初学者更要

理清他们的关系。

 

一、选择器类型

ID选择器

     id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

 

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。

       当地标记文档后,才能使用这些选择器

 

HTML标签选择器

决定哪些标签采用相应的CSS样式

 

二、联系与区别

优先级

     ID选择器>类选择器>HTML标签选择器

 

区别

      ID 选择器:“  # ”  + 自定义类名

       类选择器:" . " + 自定义类名

      HTML标签就是容器,可以存放代码,文字等。id选择器和类选择器可以嵌入到HTML标签中,也可以包含HTML

标签。

 

联系

 

文件角度

    都是在页式文件中定义,在样式文件中完善。

技术分享

 

 

样式属性角度

      基本上使用同一的属性,例如文本属性,背景属性,方框属性等

 

 

 

三、应用

 

优先级比较

    页式文件中代码

技术分享

 

    样式文件中代码

技术分享

 

       从上图中可以看出,使用id选择器和使用类选择器分别定义了不同颜色,那么由于id选择器优先级较高,所以最

终会按照#spacial{}中定义的样式显示。

 

class类选择器中的优先级

    在class类名中,用空格将类名menu 和类名niu 间隔开

技术分享

 

样式选择取决于类menu 和类niu在样式文件中排列顺序,排在最前面的优先级高。

技术分享

 

HTML标签使用

    例如:与类成父子关系的标签

技术分享

 

   定义span标签中的文字样式,可以在样式文件中这样写,类和标签名用空格隔开。(父子关系)

技术分享

 

四、小结

         熟练操作这些常见的标签才能更好的开发网页,才能灵活自如地处理页面。在使用选择器的时候,还有很多处

理技巧,这些技巧的应用在一定程度上优化了代码结构,代码的复用度高。我们需要多多积累一些这块儿的知识,并

能熟练应用。

 

CSS选择器

标签:css   html   标签   

原文地址:http://blog.csdn.net/wangju2013/article/details/46583711

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!