14.6. CSS类选择符

在HTML文档中可以为多数标签定义class与id属性，因此CSS中的类(class)选择符与ID选择符得到了广泛的使用

类选择符可以包括HTML文档中不同类型的一些元素（就像一种分类），因此一个类选择符在一个HTML文档中可使用多次

ID选择符的ID代表唯一的意思（就像一个人的身份证是唯一的），因此一个ID选择符在一个HTML文档中只可使用一次

示例

.dreamdu-red-font
{
	color: red;
}

<div class="dreamdu-red-font">
        红色字体
</div>

<p class="dreamdu-red-font">
        <span class="dreamdu-red-font">
                一个文档中多次使用一个class选择符
        </span>
</p>

一个文档中可以多次使用一个类选择符，而且可以使用在不同的标签上

CSS类选择符示例 -- 可以尝试编辑

专有元素的类选择符

*.dreamdu-red
{
	color:red;
}

.dreamdu-red
{
	color:red;
}

上面两个例子是等价的，都是当class=dreamdu-red时匹配样式，因为*代表文档中的所有元素

p.dreamdu-green-12px
{
	color:green;
	font-size:12px;
}

上面的例子只有当p标签的class属性为dreamdu-green-12px时匹配样式。从上面的示例可以看出如果类选择符名称前面有标签名，此类选择符就只能使用在此标签中

<span class="dreamdu-green-12px">Not green</span>
<p class="dreamdu-green-12px">Very green</p>

第一个不是绿色，第二个是绿色

CSS类选择符示例 -- 可以尝试编辑

一个元素使用多个类选择符

文档中的一个元素的class属性值也可以使用多个CSS类选择符定义的样式（但是每个类选择符名称应使用空格隔开）

.dreamdu-red
{
	color:red;
}

p.dreamdu-12px
{
	font-size:12px;
}

p.dreamdu-bold
{
	font-weight:bold;
}

<p class="dreamdu-bold dreamdu-12px dreamdu-red">梦之都 红色12px的粗体</p>
<p class="dreamdu-bold dreamdu-12px">梦之都12px的粗体</p>
<p class="dreamdu-12px dreamdu-red">梦之都12px的红色</p>

CSS类选择符示例 -- 可以尝试编辑

类选择符链

类选择符名称可以使用多个.相连，形成类选择符链

.www.dreamdu.com
{
	color:blue;
}

只有当一个元素使用了www、dreamdu、com三种选择符才能显示.www.dreamdu.com类选择符定义的样式

<p class="www dreamdu com">梦之都CSS 蓝色字体</p>
<p class="www dreamdu">梦之都CSS 非蓝色字体</p>

猴子提示: IE6不支持类选择符链，当一个元素只要使用了最后一个定义的类选择符就可以显示定义的样式，也就是只识别示例中最后的一个com，IE7支持类选择符链

CSS类选择符示例 -- 可以尝试编辑

类选择符与属性值选择符

HTML中的div.value与div[class~=value]是相同的

div.dreamdu-red
{
	color: red;
}

div[class~=dreamdu-red]
{
	color: red;
}

上面的两个例子具有相同的含义，但是使用类选择符div.value更简洁明确

浏览器兼容性

• CSS选择符浏览器兼容性索引

• CSS教程

• 14 CSS选择符
• 14.1 CSS选择符语法
• 14.2 CSS选择符简写方式
• 14.3 HTML文档树（元素的包含与排列关系）
• 14.4 CSS类型选择符
• 14.5 CSS全局选择符
• 14.6 CSS类选择符
• 14.7 CSS ID选择符
• 14.8 CSS组合选择符
• 14.9 CSS属性选择符
• 14.10 CSS选择符总结