IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

4 关联选择器

关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串。这些选择器可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择器大。这种方式只对在第一个元素里关联的第二个元素定义（只要具有关联关系即可，关系的元素中间可以有多层其他HTML元素），对单独的第一个元素或第二个元素无定义。如下所示：

table a { color: red} /* 只有在表格内的链接改变了样式 */

本例定义了在表格内的链接改变了样式，文字颜色为红色，而表格外链接的文字颜色没有改变。

5 组合选择器

为了减少样式表的重复声明，组合选择器声明是允许的，只要用英文逗号（,）隔开选择器就可以了。例如，文档中所有的标题可以通过组合给出相同的声明，如下所示：

h1，h2，h3，h4，h5，h6 { color: red;font-family: sans-serif } /* 使用组合选择器修饰标题 */

6 伪元素选择器

伪元素选择器是指对同一个HTML元素不同状态的一种定义方式。例如，对于标签的正常状态、访问的状态、选中状态、光标移到超链接文本上的状态，就可以使用伪元素选择器来定义。其语法结构如下：

HTML标签:伪元素 /* 伪元素选择器的语法结构 */

每个伪元素都以英文的“:”开头，后面的伪元素名称根据作用不同有各自固定的写法。而冒号前面需要指定使用伪元素的HTML标签，目前只有或

标签可用。指定超链接元素以不同的方式显示链接（links）、光标移动到超链接上（hover links）、已访问链接（visited links）和可激活链接（active links）时，定位伪元素可给出link、hover、visited或active。一个已访问的链接可以定义为不同的颜色显示，甚至不同的字体大小和风格。如下所示：

本例的效果是使当前链接在访问状态下，以不同颜色、更大的字号显示。而当网页的已访问链接被重选时，又以不同颜色、更小的字号显示。

注意，多个CSS选择器同时作用在同一个HTML元素上时，声明不同的属性具有继承的关系。如果声明的是相同属性，则以优先级高的选择器为主。主要选择器的优先级关系如下：

关联选择器 > ID选择器 > 类选择器 > HTML选择器 à从左向右CSS选择器的优先级递减