4.3 CSS 选择器

和画画一样，我们需要改变局部物体的颜色，我们首先需要定位到那里，有时候我们需要把所有的云朵填充成白色，有时候又需要在某个云朵上加上特别的金色。 类似的，CSS选择器就是用来定义我们想要改变哪些（或哪个）元素的样式。

按定位粒度来分，从大到小有通用标签、类（class）、id以及一些混合选择器。下面我们一一介绍。

通用标签（tag）选择器

使用标签名称可以定位所有的同名标签元素

a{ /* 链接 */ }
p{ /* 段落 */ }
ul{ /* 无序列表 */ }
li{ /* 列表项 */ }

类（Classes）选择器

如果我们不想把所有的标题或段落设置成相同的样式，我们就需要首先区分它们。

在HTML元素的所有属性中，类 class 是对CSS而言最为重要的属性，它直接指定了该HTML元素所用的样式。 我们可以在CSS文档中通过点号 . 加上类名称来定义这个类样式 class。 反而言之，我们也就通过这样的CSS代码选定了一组具有相同类属性的HTML元素。

.date {
  color: red;
}

上面的代码定义了一个名为 date 的class，这个类名必须和HTML元素的class属性的值相同。

CSS的命名没有特定的要求，但不要使用数字开头，另外需要注意不同样式表文件中的同名选择器有可能会产生意外的样式覆盖，语义具体的名称有助于规避这种意外的情况。

.date 类选择器将定位所有拥有 class="date" 属性的HTML元素：

<p class="date">
  Saturday Feb 21
</p>
<p>
  大会时间 <em class="date">Saturday</em>.
</p>

Saturday Feb 21

大会时间 Saturday.

ID选择器

你还可以在HTML元素中使用 id 属性，然后在CSS中通过在id名前面加上 # 前缀来定位同名ID的元素：

#title{ color: orange;}

<h1 id="title">This heading will be orange.</h1>

id和class的使用方法类似，但id是唯一的，代表某个元素；而class则是宽泛匹配，代表某类元素。

复合选择器

通用标签和类选择器都是范围选择，可以组合起来使用，使得选择语义更加具体，表示某种类型的标签， 比如上面date的例子，我们想改变class为date的em标签的颜色为蓝色，可以把两个选择器拼接成如下的CSS规则：

em.date {
  color: blue;
}

em.date 复合选择器包含：

• 一个标签（tag）选择器 em
• 一个类（class）选择器 .date

它将只对 <em class="date"></em> HTML元素起作用，而不会影响其他 .date 或 em 元素。

层级选择器

后代选择器

后代选择有3种：

• 空格（ ）。div p: 表示p是div的后代元素, div是p的祖先（选择器中的一个空格（space） 有特别的含义，定义了一个从左到右的祖先/后代层级关系）。该选择器选择所有div下的p后代元素。
• 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。
• 星号（*）。表示隔代关系。div * p表示div的孙子辈及之后的元素。

比如我们想把header部分中的所有a链接设置成红色：

header a {
  color: red;
}

上面的代码意味着“选择所有在 header 元素内部的 a 元素”，潜台词是排除header外部的a链接。

上面3种后代选择的区别，可以通过下面的在线实例，自己来调试观察：

同级选择器

同级选择有2种：

• 加号（+）。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。
• 波浪号（~）。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素（中间可以隔着其他元素）。

上面2种同级选择的区别，可以通过下面的在线实例，自己来调试观察：

伪类（Pseudo-class）选择器

我们可以把“伪类（Pseudo-class）”理解成一种动态的类，是对HTML元素的进一步描述，其设计动机是为了允许我们依赖于文档树（document tree）之外的信息（如用户操作，不可能保存在文档中）来选择元素。

伪类的作用和类（class）相似，都用来限定元素选择范围，区别是类（class）是写在HTML文档中的，而伪类选择不是预先创建的，而是动态形成的，用来定位具备某些交互或逻辑特征的元素。

比如，HTML元素拥有不同的状态（states），那么状态就是对HTML元素的一种交互性描述，当我们把鼠标悬停在一个链接上时，该元素就处于一个 hover 的状态。 CSS的伪类允许我们根据不同的状态来限定元素，从而在用户交互式呈现不同的样式。

伪类选择器的语法是在常用选择器后面追加一个冒号（colon） : 以及伪类的名称：

a {
  color: blue;
}

a:hover {
  color: red;
}

上面的代码将把处于 hover 状态的a链接设置成红色。

在后续CSS高级课题中我们还会详细讨论伪类（Pseudo-class）、伪元素（Pseudo-element）用法及其差异。

一些选择器实例

<p></p>

<div class="global"></div>

<ul>

<ol class="courses">
  <li>html basics</li>
  <li>css basics</li>
</ol>