1. 爱易网页
  2. CSS教程
  3. CSS入门教程:CSS选择器

CSS入门教程:CSS选择器

日期：2013-12-29　 浏览次数：20956 次

网页制造aiyiweb文章简介：上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种方式行内方式、内嵌方式、链接方式、导入方式，大家通过这四种方式就可以实现CSS对HTML页面款式的控制，如果要让这些款式对HTML页面中的元素实现一对一，一对多或者多对一的控

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

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

相关资料更多>

  1. 复杂引见Web Developer插件制造网页
  2. CSS改动选择网页文字背风景
  3. 表单中的name与id的异同
  4. CSS3的user
  5. 网页规划教程:掌握CSS网页规划属性
  6. 网页中轻松完成三维字体
  7. 有关表格边框的css语法整理
  8. 使用Nodejs和Grunt实现SASS的自动编译
  9. white-space:nowrap的运用