第九章CSS高级选择器

1.复合选择器

**1.1 “交集”选择器（点号）
**

“交集”复合选择器由两个选择器直接连接构成，其结果必是两者的交集。

**1.2 “并集”选择器（逗号）
**

其结果是各个基本选择器的范围。

并集选择器是多个选择器通过逗号连接而成。

1.3 后代选择器（空格）

后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以嵌套。

上面的这个3层嵌套表示的就是使用了.out类别的标记中包含.inside类别的标记，其中有包含了，如下：

需要注意的是，后代选择器产生的影响不仅限于”直接后代”，后代的后代也会受到影响。

如果设置如下样式：

“这是最外层的文字”以黑色表示，即没有设置样式的颜色；后面的”这是中间的文字”和”这是最内层的文字”则以蓝色显示。

因此在CSS
2中，规范的制定者还规定了一种复合选择器，称为”子选择器”，也就是只对直接后代有影响的选择器，而对”孙子”以及多个层的后代不产生作用。

子选择器和后代选择的语法区别是使用大于号连接。

而IE 6中，不支持子选择器，仅支持后代选择。IE
7和Firefox都既支持后代选择器，也支持子选择器。

2.CSS的继承特性

2.1 继承关系

可以看到这个页面中，标题的中间部分的文字使用了（强调）标记，在浏览器中显示为斜体。后面使用了列表结构，其中最深的部分使用了三级列表。

**2.2 CSS继承的运用
**

在前面的案例中加入如下CSS代码，就将h1标记设置为蓝色，加上下划线，并将em标记设置为红色。

可以看到其子标记em也显示出下划线，说明对父标记的设置也对子标记产生效果；而em文字显示为红色，h1标题中其他文字仍为蓝色，说明对子标记的设置不会对其父标记产生作用。

3.CSS的层叠特性

层叠即”冲突”

第一行，文本显示为标记选择器p中定义的绿色；

第二行，由于类别选择器的优先级高于标记选择器，因此显示为类别选择器中定义的红色；

第三行，ID选择器的优先级高于类别选择器，因此显示为ID选择器中定义的蓝色。

第四行，行内样式的优先级高于ID样式的优先级，因此显示为行内样式定义的橙色。

第五行，两个类别选择器的优先级相同，此时已前者为准，显示为紫色。

优先级可以表述为：

行内样式>ID样式>类别样式>标记样式