css优先级

2009-09-22 08:12:19

一、css优先级

FF: ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{})
IE: 类 > ID选择器 > 标签
例:
<div id="divMain" class="divSpecial">内容儿</div>
在Firefox中表现出 #divMain{} 所定义的样式，而在IE中则表现出 .divSpecial{} 所定义。

二、CSS文件的优先级

1、标有"!important"的规则有最高优先级

一个样式规则可以有一个"important"附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。

H1{color:black !importan; font-family:sans-serif}

注意：这种声明容易引起混乱，因此通常使用得较少。

2、创作者规则优先级高于浏览者规则

浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样式优先级较高，而浏览者设置得样式规则优先级较低。

3、更特殊得规则优先于不够特殊的规则

在决定特殊性时，selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定，数量越多优先级越高。假如规则仍然无法确定优先级，则HTML元素名的数量决定了特殊性。

4、在同一个级别的情况下，最后指定的规则有优先权

假如两个或更多的规定在应用了前三个规定具有相同优先级，则后给出的规则优先于早先给出的规则。
如果在网页的HEAD标记中同时使用了STYLE标记符（指定嵌入式样式）和LINK标记符（指定链接式样式），并且这两个样式指定中同时应用了具有同一优先级别的样式，则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。

例如，如果在LINK所链接的样式表（mycss.css）中定义了以下一条样式规则：

H1{color:red}

同时在嵌入式样式定义中也定义了一条规则：

H1{color:yellow}

在网页中的样式定义如下所示：

由于style标记符中定义的样式后出现，因此它具有更高的优先级，所以网页中h1标记符的内容将显示为黄色（yellow)。同样，如果将Link标记符的位置移动到<style></style>标记符之后，则网页中H1标记符的内容将显示为红色（red)。

另外，由于直插式样式（使用HTNL标记的style属性设置的样式）的位置最接近于样式作用的标记符，因此它通常具有高优先级。

在CSS中，你可以为同一个标签定义多个样式，如下面的例子：

------------------------------例子----------------------------
<style type="text/css">

</style>
<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------------------

这么多的样式，哪个是有效的呢？

我们一个一个把上面的样式删除，在浏览器中可以看到：

style的优先级最高，然后是id，再来是class，最后才是td
另外，使用!important可以改变优先级别为最先，如下：

-----------------------------------------
<style type="text/css">

</style>
<table>
<tr>
<td class="ab" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

td将会显示为Aqua

即优先级变为td，然后是style，再来是id，最后是class

在此要特别提到!important声明，下面还是用以前的那个例子：

-----------------------------------------
<style type="text/css">

</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

td将会显示为Aqua，这在IE4+的浏览器与支持!important声明的都是正确的，但如果换成这下这样：

-----------------------------------------
<style type="text/css">

</style>
<table>
<tr>
<td class="aaa" id="aaa" style="height:200px;width:200px;background-color: Blue;"></td>
</tr>
</table>
------------------------------------------

这个例子的结果是在IE4+的浏览器中td的颜色为Blue，而在FF中的颜色为Aqua 。这说明了在IE4+浏览器中的!important声明并不是“真正的提高优先级”，或说是“不完全的声明”，在声明之后如果有新的、相同属性名的定义，!important声明将会失效。而在FF中，!important声明在同个样式类中的优先级始终是最高的。

因此，当要修正IE与FF中的差异时，就可以使用第二个例子中的做法，大多数是用于修正定位的问题。

谁说了算？

CSS样式定义多了，常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。

1。多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：

      ！important的用户样式
      ！important的作者样式
      作者样式
      用户样式
      浏览器定义的样式

2。CSS样式的特殊性权重——谁有分量，谁说了算。

CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。

权重设定如下：

html选择器，权重为1；
类选择器，权重为10；
id选择器，权重为100；

这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000；

即如下情况：
#x34y {color:red}
<. p id=x34y > 优先选择style=""设定的样式。

其他类型的，大家看看例子就明白了。

例子：

h1{color:blue} 权重为1
p em{color:yellow} 权重为2
.warning{color:red} 权重为10
p.note em.dark{color:grag} 权重为22
#main{color:black} 权重为100 这里还有一种情况：
权重一样时如何处理？权重一样时就另说了。看看下面的就明白了。

3。CSS样式的层叠原则——谁离我近，谁说了算。

当权重一样时，会采用“层叠原则” 后定义的会被应用。

如：p{color:yellow}
p{color:red}

作用到这里 <. p >我的什么颜色呢？< /p>
结果会是red的。

4。CSS样式的特殊标记——谁有特权，谁说了算。

如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可

p {color:blue !important;}
加上!important;可将自己权重设为最高。

如果你要问两个!important;设定的样式，那个样式说了算，我说你为什么不自己试试看看呢！

好了，谁说了算的问题就到这里了。

上一篇：CSS中属性的书写顺序
下一篇：css布局中的居中

发表看法0

>> more 看看其他人的看法