css 优先级 - 爱码网

css优先级的四大原则：

原则一：继承不如指定

如果某样式是继承来的永远不如具体指定的优先级高。
例子1：
CODE:
<style type="text/css">

</style>
<span class="class3">我是多大字号？</span>

运行结果：.class3{ font-size: 12px; }

例子2：

CODE:
<style type="text/css">

</style>

<div >原则的权重就是: 原则一 > 原则二 > 原则三 > 原则四

解释：

首先遵循原则一

有指定开始使用下面的原则，无指定则继承离他最近的定义。

然后开始原则二

1、比较最高优先级的选择符
例子：
CODE:
<style type="text/css">

</style>
<div >我是多大字号？</span> </p>

运行结果:#id1 .class2 .class3{font-size:14px}

*最高级选择符的位置没有高下之分，论证：

<?php CODE:
<style type="text/css">
<!--
#id1 .class2 .class3{font-size:18px}
.class1 #id2 .class3{font-size:14px}
.class1 .class2 #id3{font-size:12px}
-->
</style>
<div >
<p >我是多大字号？</span> </p>
</div>

上例中更换3条CSS的先后可以得出，哪条位于最后，哪条起作用。说明他们的级别一样，后面的将覆盖前面的。

*将原则四归入原则二的不合理性，论证：
CODE:
<style type="text/css">
<!--
.class1 span#id3{font-size:14px}
#id1 .class2 .class3{font-size:12px}
-->
</style>
<div >
<p >我是多大字号？</span> </p>
</div>

#id1 .class2 .class3{font-size:12px}

可以看到span#id3并不比#id1高出一个级别。

无结果开始原则三
如果比较结果，选择符从最高级开始都对应，级别上的数量也相同，则开始比较谁更具体。
例子：
CODE:
<style type="text/css">
<!--
#id1 .class2 span{font-size:14px}
.class1 #id3{font-size:12px}
-->
</style>
<div >
<p >我是多大字号？</span> </p>
</div>

#id1 .class2 span{font-size:14px}

当然也可以理解为在原则二层层比较中“少一个层级的样式”，缺少的那个层级没有“层级较多的样式”多出的那个层级的级别高。（绕口令）

*将原则四归入原则三的不合理性，论证：

CODE:
<style type="text/css">
<!--
.class2 .class3{font-size:14px}
span.class3{font-size:12px}
-->
</style>
<div >
<p >我是多大字号？</span> </p>
</div>

上例中可以看出，如果将原则四并入原则三，将span.class3看作两层，那么应该和.class2 .class3层级一样多，那么应该显示12px,而事实不是这样。

最终对决原则四
如果还分不出结果，则开始原则四的比较：
例子1：
CODE:
<style type="text/css">
<!--
.class1 p.class2 .class3{font-size:14px}
.class1 .class2 .class3{font-size:12px}
-->
</style>
<div >
<p >我是多大字号？</span> </p>
</div>


.class1 p.class2 .class3{font-size:14px}

http://developer.51cto.com/art/201009/226852.htm

http://www.blueidea.com/tech/web/2009/6801.asp