CSS的类选择器

类选择器是以独立于文档元素的方式来指定样式，如果应用样式，而不考虑具体涉及的元素时，最常用的就是类选择器。

类选择器，是在类名前面加一个点（.）定义的选择器。为了提高选择器的灵活性，类选择器的名称，可以由用户自定义。如，以下代码定义了名称为 red 的类选择器：

1. .red { color: red }

要为一个元素应用类选择器定义的样式，还需要在HTML代码中，为元素指定 class属性，并把属性的值设置为指定的类名。

类选择器的样式可以应用于任何HTML元素，一个类可以在一个文档中使用任意多次。浏览器会在文档中寻找 class属性中包含指定值的元素，为该元素应用该类选择器所定义的样式，而不管它是什么元素。如：

1. class = "red">我是段落

2. class = "red">我是一级标题

浏览器会在文档中寻找 class属性中包含red的元素，则 p 元素和 h1 元素都会被选中，因此段落和 h1 的文本都会变成红色。

但有时候，仅希望给某种特定类型的元素定义类选择器，此时仅仅使用类名就不能达到需要的效果。

这时，就可以在类选择器的前面添加特定元素的限定符E，如E.class，则该类选择器只匹配类型为E，且class属性值包含指定类名的元素，两个条件中任何一个不满足，都不会匹配。如：

1. p.red { color: red }

选择器p.red解释为：“其class属性值包含red的所有p元素”。因此，该选择器就只匹配 class属性包含red的所有p元素，不匹配其它类型的元素，无论其 class属性中是否包含red。 如：

1. class = "red">我是段落

2. class = "red">我是一级标题

运行上述代码，只有段落文本会变成红色。因为 h1 元素不是段落，这个规则的选择器不会与它匹配，因此 h1 元素不会变成红色文本。

在HTML中，一个元素的 class属性值中可以包含多个类名，类名之间用空格分隔，表示为该元素应用多个类选择器的样式。当元素应用多个类的样式时，类名不分先后顺序，元素的最终样式就是所有这些样式层叠后的效果。如：

1. .red { color: red; }
2. .bold { font-weight: bold; }

1. class = "red bold">本段落的文本将显示为红色、粗体。

这个p元素同时应用了red和bold两个类选择器的样式，则段落文本为红色、粗体显示。运行结果如图 2‑3 所示：

图2-3 为元素应用多个类

当多个样式属性发生冲突时，会发生样式层叠，其结果是CSS代码中后定义的样式，会覆盖先定义的样式，而与元素 class属性中声明的顺序无关。假如将 .bold 类改为：

1. .bold { font-weight: bold; color: black; }

得到运行结果如图 2‑4 所示：

图2-4 样式的层叠

这种情况下，即便 class属性声明为 class = "bold red"，段落文本依然是黑色、粗体显示。因为多个类作用后的结果，仅仅与CSS代码中类的定义顺序有关，与其他因素均无关。

注意： IE 6选择器并不支持在class属性中声明多个类名，如果这样声明，其将以末尾类名为准，使用时千万小心。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。