揭秘CSS(第 1 版)
2.2.2 类选择器
阅读(

概述

CSS选择器

概述

基本选择器

元素选择器

类选择器

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

类选择器,是在类名前面加一个点(.)定义的选择器。为了提高选择器的灵活性,类选择器的名称,可以由用户自定义。如,以下代码定义了名称为 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属性中声明多个类名,如果这样声明,其将以末尾类名为准,使用时千万小心。

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验