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}

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

<head>
<link rel=stylesheet href="mycss.css" type="text/css">
<style>
<!--
h1{color:yellow}
-->
</style>
</head>

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

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

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

------------------------------例子----------------------------
<style type="text/css">
<!--
#aaa{
    background-color: Fuchsia;
}
.ab{
    background-color: Black;
}
td{
    background-color: Aqua ;
}
-->
</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">
<!--
#aaa{
    background-color: Fuchsia;
}
.ab{
    background-color: Black;
}
td{
    background-color: Aqua !important;
}
-->
</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">
<!--
#aaa{
    background-color: Fuchsia;
}
.aaa{
    background-color: Black;
}
td{
    background-color: Aqua !important;
}
-->
</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">
<!--
#aaa{
    background-color: Fuchsia;
}
.aaa{
    background-color: Black;
}
td{
    background-color: Aqua !important;
    background-color: Green;
}
-->
</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布局中的居中

有什么想说的吗?