我的位置: 首页  >   揭秘CSS  >   2.2.2 类选择器

2.2.2 类选择器

编辑:比特教程网    时间:2018-10-11 14:48    


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

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

.red { color: red }

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

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

<p class = "red">我是段落</p><h1 class = "red">我是一级标题</p>

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

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

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

p.red { color: red }

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

<p class = "red">我是段落</p><h1 class = "red">我是一级标题</p>

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

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

.red { color: red; }.bold { font-weight: bold; }
<p class = "red bold">本段落的文本将显示为红色、粗体。</p>

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

为元素应用多个类

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

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

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

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

样式的层叠

图2-4  样式的层叠

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

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



上一节:2.2.1 元素选择器

下一节:2.2.3 id选择器