CSS教程 CSS选择器-侯体宗的博客

CSS教程 CSS选择器
前端 / 管理员发布于 7年前 207

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

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

【标签选择器】
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

复制代码代码如下:
p{
font-size:12px;
background:#900;
color:090;
}

则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

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

复制代码代码如下:
#one{
font-size:12px;
background:#900;
color:090;
}

这样页面中的某个p就会是CSS中定义的样式。

【类选择器】
这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：
<p class="one">此处为p标签内的文字</p>
如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下
<div class="one">此处为p标签内的文字</div>
这样页面中凡是加上class="one"的标签，样式都是一样的喽~CSS定义的时候和ID选择器差不多，只不过把#换成.，如下

复制代码代码如下:
.one{
font-size:12px;
background:#900;
color:090;
}

补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：
<div class="one yellow leftStyle">此处为p标签内的文字</div>
这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用
<div id="div1" class="one yellow leftStyle">此处为p标签内的文字
</div>
【通用选择器】
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”
*{此处为CSS代码}
强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了，能这么说大家不能够完全理解，没关系，我给大家举个例子，请看下面

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div id="div1">
<p>这里是p标签区域</p>
<div>这里是a标签区域</div>
</div>
<div id="div2">
<p>这里是p标签区域</p>
<div>这里是a标签区域</div>
</div>
</body>
</html>

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

OK！选择器的内容我向大家应该都明白了，后面就继续讲解一下“选择器的集体声
明”和“选择器的嵌套”
【选择器的集体声明】
在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

复制代码代码如下:
h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}

和小学的提取公因式差不多，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住哟~
【选择器的嵌套】
选择器也是可以嵌套的，如：
#div1 p a{color:#900;}/*意思是在ID为div1
内的p标签内的链接a标签的文字颜色为红色*/
这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛~同样也是CSS代码优化的一块。
到这里，基本的选择器说完了，但是还需要给大家介绍一个“通用选择器”
*{此处为CSS代码}
好，这节课主要讲解了三种CSS代码选择器、选择器的声明、选择器的嵌套三块知识，要掌握好，如果有不懂，可以留言。

上一条：
CSS 选择器命名规范化
下一条：
CSS 控制页面样式的4种方式和优先级问题

0条评论 (评论内容有缓存机制,请悉知!)