网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

勇气

终生读书

导航

 
 
 
 
 

日志

 
 
关于我
勇气

Future depends on Responsibility~ Computer~！！！

文章分类

Css选择器  

2011-07-08 17:55:23|  分类： CSS+DIV简单布局 |  标签： |举报 |字号大中小 订阅

  下载LOFTER 我的照片书  |
CSS选择器共有四种：标签选择器、ID选择器、类选择器和通用选择器
为了后面的对选择器的解释更容易理解，在这里先打个比喻，如果把你所处的环境视为HTML页面的话，环境里的每一个人则相当于HTML页面内标签元素，每个人都有一个ID(身份证)，那么html中的每一个标签也都有自己的ID，大家都知道ID是唯一的，不可能重复。

【标签选择器】
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：
  1. p{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }
则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

【ID选择器】
ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不符合W3C标准了，那页面也就不是标准页面喽~，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：
先给某个HTML页面中的某个p标签起个ID，代码如下：
  1. <p id="one">此处为p标签内的文字</p>
在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：
  1. #one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }
这样页面中的某个p就会是CSS中定义的样式。

【类选择器】
这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：
  1. <p class="one">此处为p标签内的文字</p>
如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下
  1. <div class="one">此处为p标签内的文字</div>
这样页面中凡是加上class="one"的标签，样式都是一样的喽~CSS定义的时候和ID选择器差不多，只不过把#换成.，如下
  1. .one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }
补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：
  1. <div class="one yellow leftStyle">此处为p标签内的文字</div>
这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用
  1. <div id="div1" class="one yellow leftStyle">此处为p标签内的文字
  2. </div>
【通用选择器】
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”
  1. *{此处为CSS代码}
强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子，请看下面
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. #div1 *{
  9. background:#eee;/*设置DIV1里面所有的元素背景均为灰色*/
  10. color:#333;/*设置置DIV1里面所有的元素的字体颜色均为黑色*/
  11. }
  12. -->
  13. </style>
  14. </head>
  15. <body>
  16. <div id="div1">
  17. <p>这里是p标签区域</p>
  18. <div>这里是a标签区域</div>
  19. </div>
  20. <div id="div2">
  21. <p>这里是p标签区域</p>
  22. <div>这里是a标签区域</div>
  23. </div>
  24. </body>
  25. </html>
大家运行一下上面的例子，div1里面的两个标签是不是样式一样，这就是通用选择器的强大之处，不管里面有多少个标签都会将样式加到所有标签内，如果div1里面得所有的标签都有一部分相同的CSS代码，那么可以把这部分代码提取出来，用通用选择器来定义，这样可以大大缩减代码，但是如果div1里面只要有一个和其他元素没有相同的代码，就不能用通用选择器来定义，这也就是CSS通用选择器不灵活的一点。现在大家明白为什么通用选择器是选择器里面功能最强大的但又是用的最少的选择器了吧~~呵呵

对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端
  1. *{margin:0; padding:0;}
为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下
  1. body,div,p,a,ul,li{margin:0; padding:0;}
如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下
  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}
用到那些就写那些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧
  评论这张
 
阅读(225)| 评论(0)

历史上的今天

评论

<#--最新日志，群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

网易公司版权所有 ©1997-2018