層疊樣式類型

• 類型
  • 瀏覽器默認樣式
  • 瀏覽器用戶自定義樣式
  • 外部樣式表
  • 內(nèi)部樣式表
  • 內(nèi)聯(lián)樣式表
• 樣式順序

瀏覽器默認樣式 < 瀏覽器用戶自定義樣式 < 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式表

• 樣式表內(nèi)部選擇器

權(quán)值：標識當前選擇器的重要程度，權(quán)值越大優(yōu)先級越高
元素選擇器：1
類選擇器：10
偽類選擇器：10
ID選擇器：100
內(nèi)聯(lián)樣式：1000
生效順序：元素選擇器< 類派生選擇器 < ID選擇器 <內(nèi)聯(lián)樣式
【例如】
<div id="d1">
    <p class="p1">
    <span class="s1">this is a span</span>
    </p>
</div>
span{color:red}  /*權(quán)值：1*/
p span{color:blue}  /*權(quán)值：1+1*/
.p1 span{color:yellow} /*權(quán)值：10+1*/
d1 .p1 .s1{color:green} /*權(quán)值：100+10+10*/
d1 span{color:gray} /*權(quán)值：100+1*/

Summary

（1）樣式表的元素選擇器選擇越精確，則其中的樣式優(yōu)先級越高。
   id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式
（2）對于相同類型選擇器指定的樣式，在樣式表文件中，越靠后的優(yōu)先級越高。
（3）一個元素同時應用多個class，后定義的優(yōu)先(即近者優(yōu)先)
（4）如果要讓某個樣式的優(yōu)先級變高，可以使用!important來指定。