css样式中继承的规则大体如下:
1. 影响页面中元素的位置的属性,或者像margin,background color,border这些属性是不继承的。
2. 浏览器自定义的一些元素的样式,如link为蓝色的,headline的字体等等。
3. 当css样式冲突时,继承的不会被采用。
第三条其实指明了css样式应用的另一个规律:The Directly Applied Style Wins。当样式存在冲突时,直接运用的样式会被采用。就继承冲突而言还存在另一条规律:Nearest Ancestor Wins。
这里再讨论下one tag, many styles的情况,比如:对于一个元素<p>我们既设置了id selector style又设置了class selector style,这种情况下,如style不存在冲突,所设置的样式会组合起来运用到元素上。如存在冲突,css提供了一个公式去模拟优先级:
-
A tag selector is worth 1 point .
-
A class selector is worth 10 points .
-
An ID selector is worth 100 points .
-
An inline style is worth 1000 points .
例如:
selector id class tag total
p 0 0 1 1
.byline 0 1 0 10
p.byline 0 1 1 11
#banner 1 0 0 100
...
所以在使用css时,尽量少使用复杂的继承关系。如果优先级还是一样,如:p.byline a {color:red} 和 p a.email{color:blue} 这时就看他们的位置了,位置下的就赢,上面的样式最终会得到blue,如调换位置则是red。同样html引用外部style文件也同样运用该规则。如果想打破该规则可使用!important关键字,如:a{color:teal !omportant;},但是不要依赖它,因为ie6下可能存在无法解析的问题。
解决这种css样式最好的方法是采用选择性覆盖,就是先定义一个通用的css文件,而对某些特定的页面在定义一个css文件覆盖需要改变的样式,在引用时将特定的css文件放在后面:
<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/home.css">