第2章选择器 =>多类选择器 P41

conkeyn

浏览: 1522962 次
性别:
来自: 厦门

最近访客更多访客>>

fuyun10036

yl4257891

ja_1991

chenzehe

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS XHTML HTML

现在假设希望class为warning的所有元素都是粗体，而class为urgent的所有元素为斜体，class中同时包含warning和urgent的所有元素还有一个灰色背景。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多类选择器</title>
<style type="text/css">
.warning{
	font-weight:bold;}
.urgent{
	font-style:italic;
}
.warning.urgent{
	background-color:gray;
}
</style>
</head>

<body>
<p class="urgent warning">When handling plutonium,care must be taken to avoid the formation of a critaical mass.</p>
<p>
With plutonium, <span class="warning">the possibility of important is very real,and must be avoided at all costs</span>. This can be accomplished by keeping the various mass separate.</p>
</body>
</html>

显示效果：

这两个词的顺序无关紧要，写成class="warning urgent"也可以。

通过把两个类选择器链接在一起，仅可以选择同时包含类些类名的元素（类名的顺序不限）。可以看到，HTML源代码中包含class="urgent warning"，但是CSS选择器写作.warning.urgent。

p.warning.help{background:red;}

这个选择器将只匹配class包含词warning和help的那些p元素。因此如果一个p元素的class属笥中只有词warning和urgent时，将不能匹配。不过它匹配以下元素：

查看图片附件

分享到：

第2章选择器 =>简单的属性选择器 P44 | 第2章选择器 =>类选择器 P39

2009-04-26 22:45
浏览 1352
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

第2章选择器 =>多类选择器 P41

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

第2章 选择器 =>多类选择器 P41

评论

发表评论

相关推荐

clear在CSS中的妙用

多浏览器测试的利器-IETester,自带IE5.5,IE6,IE7,IE8等多个内核.

CSS IE 和 Firefox 的区别

第6章 文本属性==>文本缩进 P141

第6章 文本属性==>文本缩进 P135

第5章 字体

第3章 结构和层叠 => 特殊性(优先级) P69

CSS 样式学习库

第2章 选择器 =>伪类和伪元素 P57

第2章 选择器 =>选择相邻兄弟元素P56

第2章 选择器 =>特定属性选择类型 P49

第2章 选择器 =>属性值选择器 P46

第2章 选择器 =>简单的属性选择器 P44

第2章 选择器 =>类选择器 P39

第2章 选择器 =>选择器分组 P34

第2章 选择器 =>选择子元素 P54

第1章 CSS和文档局 => @import指令

第1章 CSS和文档局 => link标记 P19

CSS入门4：css选择符

最近访客更多访客>>

第2章选择器 =>多类选择器 P41

第6章文本属性==>文本缩进 P141

第6章文本属性==>文本缩进 P135

第5章字体

第3章结构和层叠 => 特殊性(优先级) P69

第2章选择器 =>伪类和伪元素 P57

第2章选择器 =>选择相邻兄弟元素P56

第2章选择器 =>特定属性选择类型 P49

第2章选择器 =>属性值选择器 P46

第2章选择器 =>简单的属性选择器 P44

第2章选择器 =>类选择器 P39

第2章选择器 =>选择器分组 P34

第2章选择器 =>选择子元素 P54