发布日期:2013-02-25 15:48 来源:佚名 标签: CSS 选择符
 

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

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

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

CSS类选择符 -- 匹配文档中元素E的class属性的属性值为classname的元素

语法: E.classname

E.classname,代表元素E的class属性的属性值为classname

说明:

匹配文档中元素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>

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

专有元素的类选择符

*.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>

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

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

文档中的一个元素的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>

类选择符链

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

.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支持类选择符链

类选择符与属性值选择符

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

div.dreamdu-red
{
 color: red;
}

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

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

浏览器兼容性


相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。