CSS选择器

 

作者：KwooJan
出处： http://www.w3cfuns.com/
本文版权归作者和w3cfuns共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

【基础二】CSS选择器

        上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种样式(方式)行内样式、内嵌样式、链接样式、导入样式，大家通过这四种样式(方式)就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器最基本的有四种：标签选择器、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属性就可以了，就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性，这么做方便是方便，但是不够灵活，如果页面中除了某个p标签背景不是红色外，其他的都是红色，就不能用这种方法定义了。


【ID选择器】
     ID选择器在某一个HTML页面中只能使用一次，就像只有一个身份证 (ID)一样，不重复！在页面中使用ID选择器更具有针对性，如：

      先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</p>
在CSS中定义ID为one的p标签的属性，就需要用到“#”，代码如下：

1. #one{
   
2. font-size:12px;
   
3. background:#900;
   
4. color:090;
   
5. }

复制代码

        这样页面中的某个p就会是CSS中定义的样式。针对“页面中除了某个p标签背景不是红色外，其他的都是红色的”情况，我们就可以用ID选择器单独定义那个背景不为红色的p标签，这样问题就解决了。


【类选择器】
这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：

1. <p class="one">此处为p标签内的文字</p>

复制代码

如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下：

1. <div class="one">此处为DIV标签内的文字</div>

复制代码

这样页面中凡是加上class="one"的标签，样式都是一样的了~
CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：

1. .one{
   
2. font-size:12px;
   
3. background:#900;
   
4. color:090;
   
5. }

复制代码

补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：

1. <div class="one yellow left">一个标签可以有多个类选择器的值</div>

复制代码

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

1. <div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>

复制代码

【通用选择器】
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”，就是“*”星号。

1. *{此处为CSS代码}

复制代码

       强大之处是因为他对整个网页中所有HTML标签进行样式定义，这种功能类似“标签选择器”，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性。

        对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对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;}

复制代码

用到哪些就写哪些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

OK！选择器的内容大家应该都明白了，如果不能完全理解也没有关系，到实战篇的时候使用一下就清楚了，但是这些选择器的格式应该记住，也是为后面实战做准备的，只有按照老师的要求，整个教程学下来才能达到相应的效果。



下面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”

【选择器的集体声明】
        在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

1. h1,h2,h3,h4,h5,h6{color:#900;}

复制代码

还有像上面刚刚讲的标签重置，就是利用的选择器的集体声明：

1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

复制代码

再举个例子，无论什么样的选择器，“标签选择器”，“ID选择器”，“类选择器”，只要是选择器，只要有公共的CSS代码，就可以用“选择器的集体声明”，起到精简代码的作用，有一段代码如下：

1. #header{font-size:14px; background:#ccc;}
   
2. div{font-size:14px; width:960px;}
   
3. .blue{font-size:14px; color:#009;}
   
4. .h1{font-size:14px; font-weight:normal;}

复制代码

        我们就可以将上面的代码进行精简，把公共的CSS代码用选择器的集体声明提取出来，有点类似小学的“提取公因式”似的，如下：

1. #header,div,.blue,h1{font-size:14px;}
   
2. #header{background:#ccc;}
   
3. div{width:960px;}
   
4. .blue{color:#009;}
   
5. .h1{font-weight:normal;}

复制代码

       这是选择器的集体声明的经典应用，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住！


【选择器的嵌套】
选择器也是可以嵌套的，如：

1. #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

复制代码

       这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛~同样也是CSS代码优化的一块。

        好，这节课主要讲解了四种CSS代码选择器、选择器的集体声明、选择器的嵌套三块知识，要掌握好，掌握牢固了，再强调一遍，这节也是为后面章节的实战做准备的，如果后面学习过程中对这节知识有遗忘，那就赶紧回来翻翻！下课！

本教程讨论群组：http://www.w3cfuns.com/forum.php?mod=group&fid=82