作者:
WangMin
格言:努力做好自己喜歡的每一件事
在講CSS 選擇器權重計算與優先級之前，我們先來了解一下CSS是用來干什么的？CSS是用來通過添加樣式使網頁更加美觀，也就是說CSS是利用選擇器來美化網頁的，使用戶可以在網頁上更清晰地找到自己需要的東西。
CSS添加樣式的方式：
- 有內部樣式（內部樣式就是在html文件中通過標簽來添加樣式）
- 外聯樣式（通過標簽將外部的樣式css文件引入到html文件中）
- 還有行間樣式，即在元素標簽中通過style=" "添加樣式；
而添加樣式是通過CSS選擇器選擇指定的標簽進行添加的，那么什么是CSS選擇器呢？它是怎么起作用的呢？它們之間的優先級是怎樣來區別的呢？
樣式類型
1、行間樣式
就是在一個標簽內，直接添加一個 style=‘ ’ ，然后在這里面添加你說需要對標簽描述的屬性及屬性值。格式如下:
<h1 style="font-size:12px;color:#000;">我是行間CSS樣式。</h1>
2、內聯樣式
在<head>頭部標簽中添加 <style type="text/css"> 標簽，然后在里面添加對應選擇器及其對選擇器描述的屬性及屬性值。格式如下：
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
3、外部樣式
單獨將對選擇器及其對選擇器描述的屬性及屬性值寫入到一個css文件中，然后將這個文件以以下方式引入到HTML文件的<head>頭部標簽中。
<link rel="stylesheet" href="css/style.css">
選擇器的種類
| 選擇器 | 表現形式 |
|---|---|
| ID | #id，例如：id="name"，id="name_txt" |
| class | .class，例如：class="name"，class="name_txt" |
| 標簽 | p，例如：body,div,p,ul,l |
| 屬性 | [type='text'] |
| 偽類 | :hover，例如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。 |
| 相鄰選擇器、子代選擇器 | > +，例如：div>p,帶大於號> |
css的權重
每一個css的選擇器都有一個相對的重要程度值，也就是權重的值，簡稱“權值”。css通過css選擇器的權重占比，來計算css選擇規則的總權值，從而確定 定義樣式規則的 優先級次序；也就是說css選擇規則的優先級 是按照 css選擇器的權值的比較 來確定的，選擇器的權值越大就優先級就高，優先級越高就決定了該元素在頁面中的最終呈現的效果。
css權重的計算規則
權值等級划分， 一般來說是划分4個等級：
| 類型 | 權重 |
|---|---|
| 內聯樣式 | 如: style=" "，權值為1000。 |
| ID選擇器 | 如：#name，權值為0100。 |
| class類選擇器，偽類和屬性選擇器 | 如.name，權值為0010。 |
| 標簽選擇器和偽元素選擇器 | 如div p，權值為0001。 |
通配符、子選擇器、相鄰選擇器等的。如: *、>、+,權值為:0000。
繼承的樣式沒有權值，通配選擇器定義的規則優先級高於元素繼承過來的規則的優先級。
!important
!important 的作用是提升優先級，換句話說。加了這句的樣式的優先級是最高的（比內聯樣式的優先級還高)。
css優先級規則
- css選擇規則的權值不同時，權值高的選擇器優先；
- css選擇規則的權值相同時，后定義的選擇器規則優先；
- css屬性后面加 !important 時，無條件絕對優先；
總體來說： !important>行間樣式 > id選擇器 > class選擇器||屬性選擇器 > 標簽選擇器 > 通配符選擇器，注意: !important規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其他對該元素的聲明，無論它處在聲明列表中的哪個位置。但注意使用!important樣式很難調試，因為它改變了你樣式本來的權值規則。
權值如何進行比較
當兩個權值進行比較的時候，是從高到低逐級將等級位上的權重值（如 權值 1000,0,0,0 對應--> 第一等級權重值，第二等級權重值，第三等級權重值，第四等級權重值）來進行比較的，而不是簡單的 1000個數 + 100個數 + 10個數 + 1個數 的總和來進行比較的，換句話說，低等級的選擇器，個數再多也不會越等級超過高等級的選擇器的優先級的。
當兩個權值進行比較時，從高位到低位逐位進行比較，從高等級開始比較，如果相同等級的權值相同，再繼續進行下一個等級的比較。如果不相同，直接應用相同等級權值比較大的選擇器對應的樣式。而不是把四個等級的權值加起來進行比較。如果某個樣式后面加了 !important，則絕對優先，比內聯樣式更優先。下面就來舉例說明一下吧！
案例1：
<div id="box">
<p class="text">CSS 選擇器權重計算與優先級</p>
</div>
#box p{
width:300px;
line-height: 30px;
color:#333;
background:#ccc;
}
div p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00;
}
執行效果如下：
我這里給div中的p進行了兩種方式的添加樣式（ID選擇器+標簽選擇器、標簽選擇器+標簽選擇器），這里根據以上權重值的比較，將第一種方式第一級ID選擇器（#box）與第二種方式的第一級標簽選擇器進行權重比較，因為ID選擇器（#box）的權重值為0100，而標簽選擇器（div）的權重值為0001，所以這里的#box 比 div 優先級要高，網頁中顯示的就#box p{...}中添加的樣式。
案例2：
<div id="box">
<p class="text">CSS 選擇器權重計算與優先級</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
#box p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00;
}
執行效果如下：
我這里給div中的p進行了兩種方式的添加樣式（ID選擇器+類選擇器、ID選擇器+標簽選擇器），這里根據以上權重值的比較，將第一種方式的樣式添加的第一級ID選擇器（#box）與第二種方式的樣式添加的第一級ID選擇器（#box）進行權重比較，因為兩個都是ID選擇器，權重一致都是0100，所以我們要對兩種方式第二級選擇器進行比較，第一種方式的第二級選擇器為類選擇器（.text）權重為0010，第二種方式的第二級選擇器為標簽選擇器（p）權重為0001，因為（.text）權重要大於（p）權重，所以網頁中顯示的就#box .text{...}中添加的樣式。
案例3：
<div id="box">
<p class="text">CSS 選擇器權重計算與優先級</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
div p{
width:300px;
line-height: 40px;
color:#fff;
background:#f00!important;
}
執行效果如下：
這里我舉的例子跟案例2是大致一樣的，但細心的你們可能發現了我給第二種方式的background屬性小小的改動了一下，給它添加了一個!important，根據上面css優先級規則的第三條：css屬性后面加 !important 時，無條件絕對優先。所以即使第一種整體的權重值比第二種整體的權重值要高，但第二種方式中的background屬性添加了 !important 比第一種方式中的background:lightgoldenrodyellow權重要高，所以網頁中div的背景色采用的是第二種方式的background屬性。
案例4：
<div id="box">
<p class="text">CSS 選擇器權重計算與優先級</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
#box .text{
width:300px;
line-height: 40px;
color:#fff;
background:#f00!important;
}
執行效果如下：
從上面css中可以看到兩個選擇器是一樣的，所以它們的權重值是一樣的。根據上面css優先級規則的二條：css選擇規則的權值相同時，后定義的選擇器規則優先，所以網頁中顯示的是后面定義的#box .text{...}中的樣式。
案例5：
<div id="box">
<p class="text" style="background:blueviolet;line-height: 25px;color:#fff;">CSS 選擇器權重計算與優先級</p>
</div>
#box .text{
width:300px;
line-height: 30px;
color:blue;
background:lightgoldenrodyellow;
}
執行效果如下：
上面的例子，我給p標簽添加了行間樣式，根據css優先級規則： !important>行間樣式 > id選擇器 > class選擇器||屬性選擇器 > 標簽選擇器 > 通配符選擇器，所以p標簽的行間樣式地優先級比#box .text{...}要高，頁面顯示的是p標簽的行間樣式的效果，又因為p標簽的行間樣式中沒有width這個屬性，所以頁面顯示的是#box .text{...}中width這個屬性。也就是說行間樣式和相應選擇器中都有的屬性，優先執行行間樣式的屬性，沒有的屬性就在相應選擇器中去找。
以上我只對二級選擇器之間的權重問題進行了舉例說明，多級選擇器之間的權重比較是一樣的比較方式。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!