选择器是CSS的核心，从最初的标签选择器、类选择器、id选择器到CSS3中提供的更丰富的选择器，定位页面上的任意元素开始变得越发简单。

6.4.1　标签选择器

标签选择器是最基本的CSS选择器，HTML文档中的元素本身就是一个选择器，例如要设置h1元素的字体颜色为红色，可以通过以下代码声明标签选择器：

如果要为h1设置更多的样式，可以继续在花括号中添加其他属性和值，例如下面这段代码：

6.4.2　class选择器

可以在HTML标签中指定class属性，将class属性的值作为class（类）选择器。一个HTML页面中，不同的HTML标签可以有相同的class属性值，应用相同class选择器的HTML标签具有相同的样式。例如下面这段代码：

在这段代码中，HTML页面中主要有两个元素，一个是h2标签，一个是p标签。这两个元素有一个共同的class属性值redText。在内部样式表中，定义了一个名为redText的样式，该样式中设置字体为红色。因为这两个元素使用了相同的类选择器，所以它们的字体颜色都是红色，运行这段代码后的效果如图6.4所示。

6.4.3　id选择器

在HTML页面中，id属性确定了HTML元素的唯一性。通过id属性设置的样式称为id选择器，所以id选择器只能应用于页面中唯一确定的元素。例如下面这段代码：

在这段代码中，h2元素的id属性值为“redText”，p元素的id属性值为“blueText”，分别为这两个元素设置id选择器，并设置它们的颜色为红色和蓝色，运行这段代码后的效果如图6.5所示。

6.4.4　通配符选择器

通配符用星号（*）表示，通配符选择器可以用来设置所有元素的样式，或者设置某个元素下所有元素的样式。通常情况下，通配符选择器会被用在CSS样式文件的开头，用于去除浏览器默认的边框设计，例如下面的代码：

这段代码的意思是所有元素的内边距设置为0个像素，所有元素的外边距设置为0个像素。由于目前可供大家选择的浏览器种类很多，不同的浏览器对于默认边框的距离设置是有差别的，为了能够更好的控制页面的布局效果，设计者往往需要清除浏览器默认的边距设计，这就是CSS样式文件的开头往往都要加上这段代码的原因。

通配符选择器还有一种用法，用于表示某个元素下所有元素的样式。我们都知道，HTML页面中的标签可以嵌套使用，如果想让被嵌套的元素具有相同的样式，就可以使用通配符选择器。例如下面这段代码：

所有被通配符选择器demo嵌套的元素，都具有相同的颜色和字体大小。

6.4.5　属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。属性选择器的应用非常灵活，我们可以将属性选择器分为以下几种类型。

1．简单属性选择器

这类属性选择器仅仅关注HTML标签中是否包含匹配的属性，而不关注其属性值是否相同。例如下面这段代码：

使用通配符选择器和属性选择器，设置所有具有title属性的元素的颜色为蓝色。注意属性选择器应该书写在方括号内。这里的通配符也可以换成特定的HTML元素，例如下面这段代码：

另外，如果需要对多个属性设置相同的样式，还可以将多个属性选择器连接在一起使用，例如下面这段代码：

2．根据具体属性值选择

根据属性值可以更准确地匹配到HTML元素，这样就可以在具有相同属性的多个元素中缩小选择范围。例如下面这段代码：

这段代码中仅指定了链接地址为“http://www.baidu.com”的超链接显示为红色，如果HTML页面中还有其他超链接，但是它们的href值不是这个链接地址，那么就不会显示为红色。

与简单的属性选择器类似，根据具体属性值选择的属性选择器也可以将具有多个属性的选择器连接在一起使用。例如下面这段代码：

这段代码中不仅确切地指定了属性href的值，而且还指定了属性title的值，只有满足这两个条件的超链接元素才可以显示为红色。

3．根据部分属性值选择

在HTML页面中，很多个相同的HTML元素都设置了同样的属性，它们的属性值相互关联却不完全相同，如果要设置这些元素的属性，就可以使用部分属性值匹配选择的方式。如果需要根据属性值中的某一部分进行选择，则需要使用波浪号（～）。例如下面这段代码：

运行这段代码后，效果如图6.6所示。

可以看到，第一段内容和第二段内容都按照我们的设计应用了样式，但是第三段内容并没有应用样式。这是因为第三段的class属性值中并没有空格，因此并不能被这种部分属性值选择的方式正确匹配。要使用部分属性值选择的属性选择器，必须将HTML元素的属性值设置成具有空格的类型。

4．子串匹配属性选择器

子串匹配属性选择器是对部分属性值选择器的一个扩充，因为它适用于多种情况下的属性选择器。例如，对以某字符串开头或结束的属性值或者属性值中包含某字符串的属性值进行选择。简单概括如下表所示：

例如下面这段代码：

第1个样式匹配以“sec”开头的class属性值，并设置字号为24像素；第2个样式匹配以“Red”结束的class属性值，并设置颜色为红色；第3个样式匹配包含“Blue”字符串的class属性值，并设置样式为蓝色。这里需要注意的是，在匹配字符串与属性值时，应该区分大小写英文字母，否则将无法正确显示样式。运行这段代码后的效果如图6.7所示。

6.4.6　嵌套选择器

HTML元素可以嵌套使用，CSS样式也可以通过嵌套来定义选择器。通过嵌套定义的选择器名称多个标记之间用空格分开，例如下面这段代码：

在这段代码中有两个超链接，第1个超链接嵌套在列表的<li>元素中，第2个超链接与列表同级。通过设置超链接的样式，我们去掉了超链接的下划线，设置字号为24个像素，并设置颜色为红色。运行这段代码后，效果如图6.8所示。

我们设置的样式不仅应用到第1个超链接，还应用到第2个超链接。如果希望第1个超链接的颜色显示为绿色，而且字号更小一些，同时又不影响第2个超链接的样式，那么就需要为这两个超链接分别设置id或class属性，并使用id选择器或者class选择器分别设置样式。而使用嵌套选择器可以省略设置id或class属性，CSS样式的代码如下所示：

再次刷新页面后，效果如图6.9所示。

6.4.7　链接选择器

链接选择器针对超链接的各种状态设置样式。超链接的状态分为未访问、已访问、鼠标悬浮和点击4种，对应的4种链接选择器如下所示。

（1）link：用于选取未被访问的链接。

（2）visited：用于选取已经访问的链接。

（3）hover：用于选取鼠标悬浮时的链接。

（4）active：用于选取点击时的链接。

例如下面这段代码：

在这段代码中，a:link选择器设置了超链接没有访问时显示为蓝色，a:visited选择器设置超链接访问后显示为棕色，a:hover选择器设置当鼠标悬浮在超链接上时，超链接显示为红色，a:active选择器设置当点击超链接时显示为黄色。 +0hkmqgJAopGfwmLEIBhyC98zL+//fno1pe19JKDJFiuPxByPCibeit5eUvmJulj