现在假设希望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时，将不能匹配。不过它匹配以下元素：
<p class="warngin urgent help">Help me!</p>
扫一扫
2410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
