同一元素应用多个class的优先级的测试！
视觉·编程 五月 25th, 2008使用多个class，以空格分开，如：<span class=”a2 a1″>
效果：
<!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=gb2312" />
<title></title>
<style type="text/css">
.a1 {
font-size: 9pt;
color: #FF0000;
}
.a2 {
font-size: 18pt;
color: #0000FF;
}
</style>
</head>
<body>
<style type="text/css"><br />
.a1 {<br />
font-size: 9pt;<br />
color: #FF0000;<br />
}<br />
.a2 {<br />
font-size: 18pt;<br />
color: #0000FF;<br />
}<br />
</style><br />
<br />
<span class="a1">a1</span><br />
<span class="a2">a2</span><br />
<span class="a2 a1">a2 a1</span><br />
<span class="a1 a2">a1 a2</span><br />
</body>
</html>
调换一下a1和a2的顺序
<!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=gb2312" />
<title></title>
<style type="text/css">
.a2 {
font-size: 18pt;
color: #0000FF;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
</style>
</head>
<body>
<style type="text/css"><br />
.a2 {<br />
font-size: 18pt;<br />
color: #0000FF;<br />
}<br />
.a1 {<br />
font-size: 9pt;<br />
color: #FF0000;<br />
}<br />
<br />
</style><br />
<br />
<span class="a1">a1</span><br />
<span class="a2">a2</span><br />
<span class="a2 a1">a2 a1</span><br />
<span class="a1 a2">a1 a2</span><br />
</body>
</html>
加上!important看看效果
<!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=gb2312" />
<title></title>
<style type="text/css">
.a2 {
font-size: 18pt;
color: #0000FF!important;
}
.a1 {
font-size: 9pt;
color: #FF0000;
}
</style>
</head>
<body>
<style type="text/css"><br />
.a2 {<br />
font-size: 18pt;<br />
color: #0000FF!important;<br />
}<br />
.a1 {<br />
font-size: 9pt;<br />
color: #FF0000;<br />
}<br />
<br />
</style><br />
<br />
<span class="a1">a1</span><br />
<span class="a2">a2</span><br />
<span class="a2 a1">a2 a1</span><br />
<span class="a1 a2">a1 a2</span><br />
</body>
</html>
结论：若同时应用多个class，后定义的优先（即近者优先），加上!important最优先！
