14.6. CSS类选择符

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

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

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

CSS类选择符 -- 匹配文档中元素E的class属性的属性值为classname的元素
  • 语法: E.classname
    • E.classname,代表元素E的class属性的属性值为classname
  • 引用网址:http://www.dreamdu.com/css/selector_class/
  • 说明:
    • 匹配文档中元素E的class属性的属性值为classname的元素
    • 类选择符名称的定义方式是,.符号,英文"dot",后加类名称classname
    • 类选择符的定义需要有.符号(.符号标明是类选择符),但是HTML文档中的标签的class属性名不能出现.符号,见下面示例:
  • 类选择符的英文名称为"class selectors",class,中文"类"的意思

示例

.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.valuediv[class~=value]是相同的

div.dreamdu-red
{
	color: red;
}

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

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

浏览器兼容性

CSS类选择符浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E.classname part yes yes yes yes yes yes yes


  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都