CSS的优先级如何确定？

20 五, 2007 in 未分类 by 幻想曲

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
<head><br />
<title> new document </title><br />
<meta name=”generator” content=”editplus” /><br />
<meta name=”author” content=”" /><br />
<meta name=”keywords” content=”" /><br />
<meta name=”description” content=”" /><br />
<style type=”text/css”><br />
body{<br />
background-color:white;<br />
color:black;<br />
}<br />
h1<br />
{<br />
background-color:blue;<br />
color:red;<br />
}<br />
em<br />
{<br />
background-color:green;color:black;<br />
}<br />
#serious{color:blue;}<br />
.yahoo{color:black;background-color:yellow;}<br />
#serious{color:red;}<br />
h1 em<br />
{<br />
color:lime;<br />
}<br />
</style><br />
</head><br />
<body><br />
<em   id=”serious” class=”yahoo”>yahoo</em><br />
</body><br />
</html></p>
<p>

运行代码

em标签定义了一个id选择符、类选择符和类型选择符
运行上述代码后发现：
em标签的background-color应用的是yahoo类选择符中的background-color属性。
而color应用的却是第二个#serious ID选择符的属性
这个优先级是如何定义的？

ID选择器(形如#divMain{})< 类(形如.divSpecial{}) < 标签(形如body{})
当定义的属性有冲突时，以最后定义的为准

2 Comments

回复

幻想曲

20 五月, 2007

[mp3]http://blog.zjol.com.cn/UploadFile/2007-2/24246458.mp3[/mp3]
回复

49degree

20 五月, 2007

FF下的Firebug可详细的查看到继承了哪些属性以及从哪继承,优先级别….