本教程出自于白师傅、本节介绍 CSS 选择符的使用.

在实际开发中, 我们只会偶尔在某些特殊情况下直接将样式表嵌在标签的 style 属性里 (就像前几节的做法), 因为这样做有诸多的弊端 (长大了你就会懂的) . 本节将讨论一种更好的样式表写法.

之所以把这部分内容放在第（三）部分，迟迟不讲，主要考虑到代码直观性，也尽量让初学者循序渐进，避免一开始就接触一大堆新的概念，徒增学习难度。

4. CSS选择符

考虑这样一个问题，如果网页中有数十个段落 <p>，所有段落的文字都需要显示为红色，按此前的写法, 那岂不是要在所有<p>标签里都写 style="color:red"，这不累死个人了吗? 更崩溃的是，如果你的老板叫你把所有段落文字都改成绿色，估计你脸也绿了吧~。

能不能像提取公因式一样，把这些重复的代码放到一个位置，统一描述? 这样既省力，而且当老板叫你把所有段落文字都改成绿色的时候就只需要改一个地方的代码，也不至于崩溃了吧！

答案是：YES !

那……把这些重复的样式描述代码提取到哪里（放哪里）呢? 有两种做法：

(1) 放在HTML文档里, 使用一对<style></style>标签装起来

(2) 干脆放在一个独立的外部文件里

  • 对于之前我们把样式写在标签的style属性的做法，如：<p style="color:red"></p>，叫做内嵌样式表，作用于一个具体的标签。

  • 把样式表写在HTML文档里, 使用一对<style></style>标签装起来的做法叫做内联样式表，作用于当前网页。

  • 放在独立文件中的做法叫做外联样式表，可作用于多个网页。

​

说了这么半天，到底怎么做，LOOK！

别着急试！之所以放个图片，而不是直接放代码，就是怕你复制了去试。

难道没发现，这样写的话浏览器岂不很迷惑，你到底是想让段落文字显示为红色，还是让span里的文字显示为红色，亦或是别的要求。

是的，既然我们把样式描述提到了一个公共的位置，而不是直接写在标签里，那就得有个机制告诉浏览器，每个样式是修饰哪个元素的。这就是我们这一节要讨论的内容: CSS选择符。

有些资料上翻译为CSS选择器，我们就不再纠结到底该叫什么了，本文统一叫 CSS选择符

如果我们想仅让上图中的段落1和段落2显示为红色，正确的代码应该如下：

例4.1：

1
2
3
4
5
6
7
8
9
10
11
<head>
    <title>学习CSS</title>
    <style type="text/css" >
        p {color : red;}
    </style>
</head>  
<body>
    <p>段落1</p>
    <p>段落2</p>
    <span>span里的内容</span>
</body>

例4.1 中， p {color : red;} 说明网页中所有的<p>标记中的文字均显示为红色，除此之外保持默认样式。

语法: 选择符 { 样式描述1; 样式描述2; ...}

可以看到，选择符的作用就是从HTML文档中挑出要进行修饰的那些元素，而{ }中的部分为样式说明，这和嵌入式样式表中的用法相同。

下面我们来讨论常用的选择符…

4.1 标签名选择符

如例4.1所示，可以使用标签名来选出指定名称的元素(标签)，如：p、div、img、a等，甚至还包括 html 标签。（快实验吧~）

这里要隆重介绍一个特别的选择符 — “*” ，它可以代表任意标签。好好用它，可以省不少事！

比如，我们若需要将整个网页中所有的文字字号设置为12px，那可以写成：

​ * { font-size : 12px; }

是不是很省事?

​

4.2 ID选择符

我们可以为标签指定一个ID，如：<p id=”p1”></p>，这样在内联样式表或外联样式表中即可使用 #p1 选中该元素。注意ID值前面的”#”。

例4.2：

样式表 HTML
#p1 {color : red;} <p id=”p1”>段落1</p>
<p>段落2</p>

结果: 只有”段落1”为红色文字

注意，在一个网页中，ID应该唯一，即不应出现多个元素相同ID。

​

4.3 类选择符

例4.3：

样式表 HTML
.classA {color : red;}
.classB {color : green;}		 <p class=”classA”>段落1</p>
<p class=”classB”>段落2</p>
<p class=”classA”>段落3</p>
<span class=”green”>SPAN</span>

结果：”段落1”和”段落3”为红色，”段落2”和”SPAN”为绿色

我们可以把HTML标签分为多个类别（类名自己定义），然后在标签中使用class属性说明该标签属于哪个分类

  • 注意样式表中，类名最前面有个句点”.”
  • 一个 class 属性中可以有多个样式类名, 使用空格分隔即可, 如: class="classA classB"

​

4.4 伪类

对于诸如超链接 <a> 这样的标签，根据状态不同，它可能显示不同的显示外观。例如下面4个图分别是超链接处于普通链接状态（link）、鼠标处于其上方（hover）、鼠标按住（active）和已访问过（visited）4个不同状态

我们可以如下例更改其外观：

1
2
3
4
5
6
7
8
9
10
11
样式表:
a:link { color : black; text-decoration:none;}
a:hover { color : red; text-decoration:underline;}
a:active { color : green; }
a:visited { color : blue; }

HTML:
<a href="http://www.cctv.com">超链接</a>

结果:
自己试试吧……
  • 使用伪类可以指定的是元素在不同状态或上下文环境下的样式

  • 伪类需要与别的选择符组合使用，如上例中与 a 选择符组合a:hover。

  • 还有更多的伪类可以使用，如: :first-child、:last-child、:before、:after …, 用好伪类可以让我们在做选择元素时更灵活, 请自行查阅别的资料。

​

4.5 属性选择符

所谓属性选择器是根据元素标签中的属性来进行选择，直接看例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
样式表:
a[title]{ color: red;}
a[href="http://www.cctv.com"]{color: green;}
a[href="http://www.cctv.com"][title="cctv"]{color: blue;}

HTML:
<a href="http://www.163.com" title="163">超链接1</a>
<a href="http://www.cctv.com">超链接2</a>
<a href="http://www.cctv.com" title="中央电视台">超链接3</a>
<a href="http://www.cctv.com" title="cctv">超链接4</a>

结果:
超链接1为红色，超链接2、3为绿色，超链接4为蓝色

例子中可以看到，使用”[]”可以定义属性选择器。

  • 若”[]”中只有属性名（如第1行）则表示元素存在该属性即匹配
  • 若”[]”中既有属性名，又有值（如第2行），则表示元素必须存在该属性，且值为指定值。此处”属性值”支持子串匹配（具体是怎样的，请查看其它资料）。
  • 若有多个”[]”，表示多个属性选择必须同时匹配，如第3行。

​

4.6 组合

前述几种基本选择符还可以组合使用，根据组合形式不同，表示不同的选择方式。常用组合方式有如下几种：

(1) 直接结合：例如: p.classA表示选择<p>标签中 class="classA" 的元素。

(2) 逗号分隔：表示并列关系。例如： p, span 表示选择 <p> 和 <span>

(3) 空格分隔：表示选择后代。例如： p span 表示选择 <p> 的后代中的 <span>

(4) “>”分隔：表示选择 “直接儿子”。例如：p > span 表示选择 <p> 的直接儿子中的 <span> 。（不明白后代和直接儿子有什么区别? 看后面的例子就明白了）

(5) “+”分隔：表示选择相邻的兄弟元素。例如：p + span表示选择 <p> 的兄弟元素中其后紧邻的 <span>。（ 什么是兄弟? 看后面的例子！）

仔细实验下表中的例子, 其中红色标注的文字表示在浏览器中显示时此文字为红色：

# 样式表 HTML
1 p.classA {color : red;} <p>段落1</p>
<span>标签</span>
<p class=”classA”>段落1</p>
2 p, span {color : red;} <p>段落</p>
<span>标签</span>
<div>DIV里的文字</div>
3 p span {color : red;} <span>标签</span>
<p><span>标签</span></p>
<p><a><span>标签</span></a></p>
4 p > span {color : red;} <span>标签</span>
<p><span>标签</span></p>
<p><a><span>标签</span></a></p>
5 li + li {color : red;} <ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ul>

比较上表中第3、4项的结果，现在知道后代与直接儿子的区别了吧！后代包括子子孙孙，无论多少代。而直接儿子指的是第1代，呵呵~

研究第5项应该明白什么是兄弟了吧，嘿嘿~

重要的事情说三遍, 多实践! 多实践! 多实践!

​

外联样式表

经过多次实验，现在你手头上应该至少有一个含有内联样式表的HTML文档了吧。现在我们来新建一个文本文件，并把已有的内联样式表代码（不含<style>和</style>）剪切到新建的文本文件中，保存文件到HTML文档同一文件夹下（文件名叫test.css吧！注意文件扩展名为.css）

最后，在HTML文档的<head></head>标签中写入下面行代码:

<link href="test.css" rel="stylesheet" type="text/css" />

测试一下，打开HTML文档，是不是效果与使用内联样式表一样?

这就是外联样式表，自己总结一下，把操作步骤记下来…

其中，link标签中的href属性指明了外联样式表文件的相对路径。实际项目实践中，我们通常会把样式表文件放在一个独立的文件夹中，这样便于管理。此时，href属性那里相应调整一下就可以了。

显然，使用外联样式表可以令HTML文档更简洁，从逻辑上来说也更合理（HTML文档描述内容是什么， CSS文件描述元素什么样）。所以，大力推荐使用外联样式表！

​

好了，至此关于CSS的介绍就结束了，关键还需要多加实践，注意总结和积累，研究一下别人写的代码也是一个不错的学习方法。

下一节 CSS入门精要 (四) 中给出了一个简单的综合示例，如果看完了前面的讲述还不知道如何入手实战，可以继续往下阅读.