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

现在假设希望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>

 

 

 

 

你可能感兴趣的:(html,css,XHTML)