3.4 CSS选择器

要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

3.4.1 元素选择器

最常见的CSS选择器是元素选择器。换句话说，文档的元素本身就是最基本的选择器。例如p、h1、table、a，甚至可以是html本身。

*代表通配符选择器，可以与任何元素匹配，就像是一个通配符。上面的规则可以使文档中的每个元素都为红色。

3.4.2 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“＃”符号来定义。

下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

提示：id属性只能在每个HTML文档中出现一次。

3.4.3 类选择器

类选择器用于描述一组元素的样式，它以一个点号显示。

在上面的例子中，所有拥有center类的HTML元素均为居中。在下面的HTML代码中，h1和p元素都拥有center类。这意味着两者都将遵守.center选择器中的规则。

3.4.4 属性选择器

可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。注意：只有在规定了！DOCTYPE时，IE7和IE8才支持属性选择器。在IE6及更低的版本中，不支持属性选择。下面的例子为带有title属性的所有元素设置样式：

1.属性和值选择器

下面的例子为title="just"的所有元素设置边框为5px的蓝实线：

2.属性和值选择器-多个值

下面的例子为包含指定值的title属性的所有元素设置样式，适用于由空格分隔的属性值：

下面的例子为包含指定值的lang属性的所有元素设置样式，适用于由连字符分隔的属性值：

3.各种属性和值选择器

表3-1 列举了各种属性和值选择器。

3.4.5 派生选择器

CSS可以依据元素位置的上下文关系来定义样式。在CSS1中，通过这种方式来应用规则的选择器称为上下文选择器（Contextual selectors），这是由于它们依赖上下文关系来应用或者避免某项规则。在CSS2中，它们被称为派生选择器，但是无论怎样称呼它们，它们的作用都是相同的。派生选择器允许根据文档的上下文关系来确定某个元素的样式。通过合理地使用派生选择器，可以使HTML代码更加整洁。派生选择器包含：CSS后代选择器、CSS子元素选择器和CSS相邻兄弟选择器。

1.后代选择器

后代选择器（Descendant selector）又称为包含选择器，可以选择作为某元素后代的元素。可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果希望只对h1元素中的em元素应用样式，可以这样写：

上面这个规则会把作为h1元素后代的em元素的文本变为红色。其他em文本（例如段落或者块引用中的em）则不会被这个规则选中：

关于后代选择器，很重要的一点就是第一个参数和第二个参数之间的代数可以是无限的。例如HTML代码：

例3-7：

CSS代码：

以上CSS样式会运用于HTML代码中两处红色的<em>元素。

2.子元素选择器

与后代选择器相比，子元素选择器（Child selector）只会选择作为某元素子元素的元素，而不会扩大到任意的后代元素。

例如，如果希望选择只作为h1元素子元素的strong元素，可以这样写：

这个规则会把第一个h1下面的strong元素变为红色，但是第二个h1中的strong元素不受影响：

3.相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。例如下列HTML代码：

例3-8：

以上第一个strong元素紧邻着h2元素并且它们拥有相同的父亲div元素，所以h2+strong会选择第一个<strong>元素而不会选择第二个<strong>元素。

例3-9：

CSS代码：

以上li+li是选择紧挨着li元素后面的第一个<li>元素，所以第一个<li>元素不会被选择；而第二个<li>元素是紧挨着第一个li元素的，所以会被选择；第三个<li>元素是紧挨着第二个<li>元素的，同样也会被选择。

3.4.6 伪类

CSS伪类用于向某些选择器添加特殊的效果。同一个标签，根据其不同的状态，有不同的样式，这就叫作“伪类”。伪类的语法如下：

CSS类也可以与伪类搭配使用：

例如，超链接样式设定：

超链接点击之前：a：link{color：＃ff0000；}

超链接被访问过之后：a：visited{coolor：＃00ff00；}

鼠标悬停在标签上的时候：a：hover{color：＃ff00ff；}

鼠标点击标签，但是不松手时：a：active{color：＃0000ff；}

3.4.7 伪元素

伪元素（pseudo-element）是HTML中并不存在的元素，用于向某些选择器设置特殊效果。由定义可知，伪元素原来在DOM（文档对象模型）结构中是不存在的。伪元素创建了一个容器，这个容器不包含在DOM结构中，但是却有内容，使用“content”来添加内容，可以对其进行样式的自定义，也可以获取其中的内容。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

在CSS3中，伪元素由两个冒号：：开头，然后是伪元素的名称。使用两个冒号：：是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已经存在的伪元素仍然可以使用一个冒号：的语法，但是CSS3中新增的伪元素必须使用两个冒号。

伪元素的语法如下：

CSS类也可以与伪元素配合使用：

例如，对文本首行设置特殊样式：

其他的伪元素，例如：first-letter用于向文本的第一个字母添加特殊样式；：before在元素之前添加内容；：after在元素之后添加内容。

3.4.8 选择器组合

1.id选择器和派生选择器

在现代布局中，id选择器常常用于建立派生选择器。

上面的样式只会应用于出现在id是sidebar的元素内的段落。这个元素很可能是div层或者是表格单元，也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，例如<em></em>或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素<span>中嵌入<p>。

提示：单位“em”是一个相对的大小，用户的浏览器默认渲染的文字大小是“16px”，如果将元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75×16px=12px”。

2.类选择器和派生选择器

和id一样，class也可被用作派生选择器。

在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字，名为fancy的更大的元素可能是一个表格或者一个div层。

3.元素可以基于它们的类而被选择

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色文字。

用户可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色文字。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色文字。当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于书写这条规则的方式，这个效果仅在被标注为fancy的表格单元中有效，即使用td元素来选择fancy类。