一、CSS的优先
1、标?!important"的规则有最高优先
一个样式规则可以有一?important"附带标签Q表C样式规则h最高优先。例如下面例子中Q前景色被标为important?/span>
注意Q这U声明容易引h乱，因此通常使用得较?/span>
2、创作者规则优先高于览者规?/span>
览器允许浏览者创建样式规则以覆盖pȝ~省倹{在此情况下Q由|页创作者明设定得样式优先U较高，而浏览者设|得样式规则优先U较低?/span>
3、更Ҏ得规则优先于不够Ҏ的规?/span>
在决定特D性时Qselector中的ID属性有最高优先。基于ID selector的优先可通过计数Selector中类属性的数量定Q数量越多优先高。假如规则仍然无法确定优先Q则HTML元素名的数量军_了特D性?/span>
4、在同一个别的情况下，最后指定的规则有优先权
假如两个或更多的规定在应用了前三个规定具有相同优先Q则后给出的规则优先于早先给出的规则?/span>
如果在网늚HEAD标记中同时用了STYLE标记W（指定嵌入式样式）和LINK标记W（指定链接式样式）Qƈ且这两个样式指定中同时应用了h同一优先U别的样式，则STYLE标记W和LINK标记W的先后序决定样式的优先U?/span>
例如Q如果在LINK所链接的样式表Qmycss.cssQ中定义了以下一条样式规则：
H1{color:red}
同时在嵌入式样式定义中也定义了一条规则：
H1{color:yellow}
在网中的样式定义如下所C：
<LINK rel=stylesheet href="mycss.css" type="text/css">
<STYLE>
<!--
H1{color:yellow}
-->
</STYLE>
</HEAD>
׃STYLE标记W中定义的样式后出现Q因此它h更高的优先Q所以网中H1标记W的内容显CZؓ黄色Qyellow)。同P如果Link标记W的位置Ud?lt;STYLE></STYLE>标记W之后，则网中H1标记W的内容显CZؓU色Qred)?/span>
另外Q由于直插式样式Q用HTNL标记的style属性设|的样式Q的位置最接近于样式作用的标记W，因此它通常h高优先?
二、css优先U的四大原则Q?/span>
原则一Q?l承不如指定
如果某样式是l承来的永远不如具体指定的优先高?/span>
例子1Q?/span>
CODE:
<style type="text/css">
<!--
*{font-size:20px}
.class3{ font-size: 12px; }
-->
</style>
<span class="class3">我是多大字号Q?lt;/span>
q行l果Q?class3{ font-size: 12px; }
例子2Q?/span>
CODE:
<style type="text/css">
<!--
#id1 #id2{font-size:20px}
.class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
q行l果Q?class3{ font-size: 12px; }
注意Q后面的几大原则都是建立?#8220;指定”的基上的?/span>
原则二： #ID > .class > 标签选择W?/span>
例子Q?/span>
CODE:
<style type="text/css">
<!--
#id3 { font-size: 25px; }
.class3{ font-size: 18px; }
span{font-size:12px}
-->
</style>
<span id="id3" class="class3">我是多大字号Q?lt;/span>
q行l果Q?id3 { font-size: 25px; }
原则三：具体越强大?/span>
解释Q当Ҏ个元素的CSS选择W样式定义的具体，层明，该定义的优先U就高?/span>
CODE:
<style type="text/css">
<!--
.class1 .class2 .class3{font-size: 25px;}
.class2 .class3{font-size:18px}
.class3 { font-size: 12px; }
-->
</style>
<div class="class1">
<p class="class2"> <span class="class3">我是多大字号Q?lt;/span> </p>
</div>
q行l果Q?class1 .class2 .class3{font-size: 25px;}
原则四：标签#id >#id ; 标签.class > .class
上面q条原则大家应该也都知道Q看例子
CODE:
<style type="text/css">
<!--
span#id3{font-size:18px}
#id3{font-size:12px}
span.class3{font-size:18px}
.class3{font-size:12px}
-->
</style>
<span id="id3">我是多大字号Q?lt;/span>
<span class="class3">我是多大字号Q?lt;/span>
q行l果Qspan#id3{font-size:18px} span.class3{font-size:18px}
很多Z有这L疑问Qؓ什么不把这个原则四归入原则一形成Q?/span>
?标签#ID > #ID > 标签.class > .class > 标签选择W?> 通配W??呢？或者将 “标签.class” 看作多更为具体的 “.class” 从而归入原则二呢？后面我将解答各位的疑惑，q就涉及到CSS的解析规?--------q四大原则间也是有优先的，是不是有些糊涂了Q别急，l箋看?/span>
*四大原则的权?/span>
怿很多人都知道上面的四大原则，不要以ؓ知道了这四大原则p分Lcss中那条代码是起作用的Q不信？那你5U内能肯定的知道下面q段代码Q测试中的文字的字号吗？
CODE:
<style type="text/css">
<!--
.class1 p#id2 .class3{font-size:25px}
div .class2 span#id3{font-size:18px}
#id1 .class3{font-size:14px}
.class1 #id2 .class3{font-size:12px}
#id1 #id2{font-size:10px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
Z大家方便阅读Q我L了一些代码?/span>
四大原则的权重就? 原则一 > 原则?> 原则?> 原则?/span>
解释Q?/span>
首先遵@原则一
有指定开始用下面的原则Q无指定则承离他最q的定义?/span>
然后开始原则二
1、比较最高优先的选择W?/span>
例子Q?/span>
CODE:
<style type="text/css">
<!--
#id3{font-size:18px}
.class1 .class2 .class3{font-size:12px} /* 描述的再具体也不起作?/span> --- 原则?/span> */
.class3{font-size:18px}
div p span{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
q行l果Q?id3{font-size:18px}
删掉上面CSS中的前两行可以得出，如果没有最高别的#ID会寻?class 即后面的CSS按照“原则?#8221; 描述的再具体也无法突破原则一?/span>
2、如果两条CSS的如果最高选择W优先一P则比较他们的数量
例子Q?/span>
CODE:
<style type="text/css">
<!--
.class1 #id3{font-size:12px}
.class1 .class2 #id3{font-size:14px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
q行l果:.class1 .class2 #id3{font-size:14px}
3、如果最高选择W别和数量都一P则按照原则二比较他们下一U，以此cL?/span>
例子1Q?/span>
CODE:
<style type="text/css">
<!--
#id1 .class2 .class3{font-size:14px}
div .class2 #id3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
q行l果:#id1 .class2 .class3{font-size:14px}
*最高选择W的位置没有高下之分Q论证：
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 id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
上例中更?条CSS的先后可以得出，哪条位于最后，哪条起作用。说明他们的U别一P后面的将覆盖前面的?/span>
*原则四归入原则二的不合理性，Q?/span>
CODE:
<style type="text/css">
<!--
.class1 span#id3{font-size:14px}
#id1 .class2 .class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
#id1 .class2 .class3{font-size:12px}
可以看到span#id3q不?id1高出一个别?/span>
无结果开始原则三
如果比较l果Q选择W从最高开始都对应Q别上的数量也相同Q则开始比较谁更具体?/span>
例子Q?/span>
CODE:
<style type="text/css">
<!--
#id1 .class2 span{font-size:14px}
.class1 #id3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
#id1 .class2 span{font-size:14px}
当然也可以理解ؓ在原则二层层比较?#8220;一个层U的样式”Q缺的那个层没有“层较多的样?#8221;多出的那个层U的U别高。（l口令）
*原则四归入原则三的不合理性，Q?/span>
CODE:
<style type="text/css">
<!--
.class2 .class3{font-size:14px}
span.class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
上例中可以看出，如果原则四q入原则三，span.class3看作两层Q那么应该和.class2 .class3层一样多Q那么应该显C?2px,而事实不是这栗?/span>
最l对军_则四
如果q分不出l果Q则开始原则四的比较：
例子1Q?/span>
CODE:
<style type="text/css">
<!--
.class1 p.class2 .class3{font-size:14px}
.class1 .class2 .class3{font-size:12px}
-->
</style>
<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字号Q?lt;/span> </p>
</div>
.class1 p.class2 .class3{font-size:14px}
]]>