選擇器優先級 與 4中引入樣式方式
這裏涉及css樣式加載順序、覆蓋規則，以及優先級提升問題；
1. css樣式加載順序
// a.css .one{ color: red; } // c.css .three{ color: green; } <head> <link href=‘‘./a.css"> <style> .two{ color:gray; } </style> <link href="./c.css"> </head> <body> <div class="one two three"></div> <div class="one three two"></div> <p class="two one three" style="color:yellow;"></p> </body>
結果： 這兩個<div>字體顯示的都是green；<p>顯示的是yellow；
原因如下：
樣式的加載順序是 a.css ---> <style> ---> c.css；這個加載順序很重要，因為涉及到覆蓋規則；
選擇器的優先級與在元素中書寫順序無關；class="one two three"，class="three two one"等順序不影響優先級；
同級選擇器中，選擇器書寫順序越靠後，優先級越高！後面的總是覆蓋前面的；【覆蓋規則】
元素中的style樣式優先級最高！
2.幾點說明
2.1 "元素中的style" > "文件頭中的style" > "外部文件中的樣式"
這句話很概況性，存在讓大家誤解的地方；其中“元素中的style”優先級最高是正確的，但是後面關於頭文件中的style、link引用的外部文件就不正確的；
不正確的原因：與css樣式加載順序有關，比如上面的舉例中，c.css文件晚於<style>加載；開篇例子已經說明了這個問題；
2.2 元素選擇器越精確，對應的樣式優先級越高
id選擇器 > 類選擇器 > 元素選擇器
元素中的樣式大於id選擇器； <p class="two one three" style="color:yellow;"></p>
2.3 優先級提升 !important
屬性使用了!important，此時此屬性優先級最高
3.選擇器權值
每種選擇器都有對應的權值；總共有四類：
4個等級的定義如下：
- 第一等：代表內聯樣式，如: style=””，權值為1000。
- 第二等：代表ID選擇器，如：#content，權值為100。
- 第三等：代表偽類和屬性選擇器，如.content，權值為10。
- 第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
// d.css p.five{ color:red; } // 權值 p=1 .five=10 ,valTotal=10+1=11 <p style="color:white;"></p> // 權值1000
4.就近原則
樣式優先級 理論上：行內>內嵌>鏈接>導入，
但實際上可能有所變化，實際上：內嵌、鏈接、導入在同一個文件頭部，誰離相應的代碼近，誰的優先級高
CSS 優先級法則：
A 選擇器都有一個權值，權值越大越優先；
B 當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；[就近原則、覆蓋原則]
C 創作者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；
D 繼承的CSS 樣式不如後來指定的CSS 樣式；
E 在同一組屬性設置中標有“!important”規則的優先級最大；
css引入樣式的四種方式
1. 內聯樣式
<div style="color:red;"></div>
2.內部引入
<head>
<style>
。。。
</style>
</head>
3. 外部鏈接 <link>
<link href="./ab.css">
4. 外部引入 @import url()
這種語法可以寫在外部文件中、<style></style>，但是有點要註意：要寫在這些部分的首行，否則無效
選擇器優先級 與 4中引入樣式方式