上一篇文章介紹瞭如何利用CSS選擇器為元素應用各種豐富的樣式，每個合法的文檔都會生成一個結構樹，瞭解這一點，就能根據元素的祖先、屬性、兄弟等元素穿件選擇器選擇元素。 本篇文章將討論3中機制之間的關係：特殊性、繼承和層疊 特殊性 有的時候我們為同一個元素設置了不同的CSS樣式代碼，那麼元素會啟用哪一個 ...
上一篇文章介紹瞭如何利用CSS選擇器為元素應用各種豐富的樣式，每個合法的文檔都會生成一個結構樹，瞭解這一點，就能根據元素的祖先、屬性、兄弟等元素穿件選擇器選擇元素。
本篇文章將討論3中機制之間的關係：特殊性、繼承和層疊
特殊性
有的時候我們為同一個元素設置了不同的CSS樣式代碼，那麼元素會啟用哪一個CSS樣式呢?
我們來看一下麵的代碼：
<style type="text/css"> p{
color:red;
} .first{
color:green;
} </style>
<p class="first">這是第一個段落</p>
在樣式中p和.first都匹配到了p這個標簽上，那麼會顯示哪種顏色呢？
green是正確的顏色，那麼為什麼呢？
是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。
那接下來講解權值的規則：
標簽的權值為：1;
類的權值為：10;
ID的權值為最高：100;p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/
重要性
有時某個聲明可能非常重要，超過了其他聲明。CSS2.1稱之為重要聲明，並允許在這些聲明的結束分號之前插入!important來標示。
<style type="text/css">
p{
color:red!important;
}
p{
color:green;
}
</style>
<p class="first">這是第一個段落</p>
這時p段落中的文本會顯示的red紅色。
繼承
特殊性對於理解如何向文檔應用聲明很重要，同樣還有個很重要的概念就是繼承，基於繼承機制，樣式不僅應用到指定的元素，還會應用到其後代元素。
<script type="text/css"> p{ color:red; } </script> <p>這是一個<span>悲傷地故事</span></p>
這裡span是p的子元素。那麼p的顏色改變那麼其span的顏色也會相應改變；
註：有些CSS樣式是不具有繼承性的。例如border；
<script type="text/css">
p{
border:1px solid red
}
</script>
<p>這是一個<span>悲傷地故事</span></p>
在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線，而對於子元素span是沒用起到作用的。一般的，大多數框模型屬性（包括外邊距、內邊距、背景和邊框）都不能繼承。
層疊性
<script type="text/css">
p{
color:red;
}
p{
color:green;
}
</script>
<p class="first">這是一個<span>悲傷的故事</span></p>
最後 p中的文本會設置為green，這個層疊很好理解，理解為後面的樣式會覆蓋前面的樣式。
所以css樣式優先順序就不難理解了：
內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
