css冲突时的运用规则

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">