CSS屬性簡寫和選擇器的優先級是怎樣的

今天就跟大家聊聊有關CSS屬性簡寫和選擇器的優先級是怎樣的，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

幾個常用 CSS 屬性的簡短寫法

精簡 CSS 代碼有很多種方法，但其中最常用的方法可能就是使用屬性的簡短形式。

具有簡短寫法的 CSS 屬性很多，但是常用的屬性無外乎字體、列表、背景、邊框、透明等幾種，所以在此對這幾種屬性的簡短寫法做個歸納，備忘。
font 屬性

font 屬性涉及到字體、字號、行高等好幾個屬性，使用簡短寫法的時候可以節省好多代碼量。雖然并非所有屬性都要定義，但是一般來說 font-size 和 font-family 是必不可少的，以下是 font 的幾個屬性與其對應的默認值：

1. /* font 各屬性與默認值 */  

2. font-variant: normal;   

3. line-height: normal;   

4. font-family: varies;   

5. font-weight: normal;   

6. font-style: normal;   

7. font-size: medium;  

以上 6 個屬性可以合并成一行，根據 W3C 規范，各屬性前后排列順序依次為：

1. /* 字體各屬性前后順序 */  

2. font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];  

再看以下幾個示例：

font: 14px Georgia, serif;   

1. font: 14px/1.4 Georgia, serif;   

2. font: italic lighter 14px/1.4 Georgia, serif;   

3. font: italic small-caps lighter 14px/1.4 Georgia, serif;  

可以看到，一行代碼就可以代替一段代碼，而且看起來還更優雅一些，就是單獨查找某個屬性的時候有點不太方便，看著眼花。
list 屬性

list 有三個屬性，這三個屬性分別定義：type、image 和 position，它們的屬性名和默認值分別如下：

1. list-style-type: disc;   

2. list-style-image: none;   

3. list-style-position: outside;  

list 只有三個屬性，并不復雜，但是我們仍然可以將這三個屬性合并為在一行中，根據 W3C 規范，寫法如下：

1. /* list 屬性簡短寫法 */  

2. list-style: [list-style-type] [list-style-position] [list-style-image];   

3.   

4. /* 示例 */  

5. list-style: none;   

6. list-style: disc;   

7. list-style: disc outside;   

8. list-style: disc outside url(bg.png);  

一如既往的簡單，基本上就是簡寫了 list 屬性的名稱，然后按順序排列一下屬性的值即可。
background 屬性

很多樣式表中都會多次定義 background 屬性，每次都要重復其 5 個屬性的話，那代碼量可會成倍的增加呢。下面是其 5 個屬性名及其默認值：

1. /* background 的各屬性及其默認值 */  

2. background-attachment: scroll;   

3. background-color: transparent;   

4. background-position: top left;   

5. background-repeat: repeat;   

6. background-image: none;  

根據 W3C 規范，將其 5 個屬性合并起來的寫法如下：

1. /* background 屬性簡短寫法 */  

2. background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];   

3.   

4. /* 示例 */  

5. background: #777;   

6. background: url(images/bg.png) 0 0;   

7. background: #777 url(images/bg.png) repeat-x 0 0;   

8. background: #777 url(images/bg.png) repeat-x fixed 0 0;  

對于 background 簡短寫法而言，不同的標簽的使用方法和效果都有一些細微差別，欲知詳情者，請至官方文檔查看。
border 屬性

border 屬性更為簡單，它 3 個屬性以及默認值如下：

1. /* border 各屬性及其默認值 */  

2. border-width: none;   

3. border-style: none;   

4. border-color: none;  

根據 W3C 規范，其簡短寫法如下：

1. /* border 屬性簡短寫法 */  

2. border: [border-width] [border-style] [border-color];   

3.   

4. /* 示例 */  

5. border: 1px solid #111;   

6. border: 2px dotted #222;   

7. border: 3px dashed #333;  

當然也可以為 4 個邊框定義不同的樣式：

1. border-bottom: 1px solid #777;   

2. border-right:  2px solid #111;   

3. border-left:   2px solid #111;   

4. border-top:    1px solid #777;  

CSS 選擇器的優先級問題

CSS 意為層疊樣式表。所謂層疊，就是說，可以用多個 CSS 聲明來作用于同一元素，例如用一段 CSS 來定義文字的顏色，用另外一段 CSS 來定義文字的大小，最終達到樣式疊加的效果。

這種特性一定程度上使 CSS 可以更為方便的定義樣式，但同時也帶來了一定的復雜性。例如，當多個樣式作用于同一個元素，而且還是作用于同一個屬性，元素最終會以何種方式來呈現樣式呢？

參考下面這個例子：

1. p {   

2.  color: black;   

3.  background-color: white;   

4. }   

5. div.warning p {   

6.  color: red;   

7. }   

8. div#caution p {   

9.  color: yellow;   

10. }   

11. body#home div p {   

12.  color: white;   

13. }  

此樣式表中有 4 組選擇器，且最終都指向 p 元素，并且每組樣式中都有 color 屬性。這樣一來，可能的情況就是會有多個顏色屬性，被施加于同一個 p 元素。問題來了，瀏覽器最終會以什么樣的方式來渲染 p 的顏色呢？后定義的顏色會覆蓋掉先定義的顏色嗎？

這里就涉及到一個 CSS 選擇器優先級的問題，如果有多個選擇器作用于某元素的同一個屬性，那么瀏覽器會去計算其對應選擇器的優先級，并最終將優先級最高的那個選擇器的樣式作用于元素。
如何計算優先級呢？

優先級的計算通常遵循如下規則：

    如果某元素被設置了 style 屬性，也就是說被設置了行內樣式，那么此行內樣式將擁有最高的優先級，任何其它外部樣式都不能將其覆蓋。如果沒有被設置行內樣式，那么參照下面的第 2 條規則。
    數一下選擇器中 ID 選擇器的個數，個數最多的，優先級就最高。如果 ID 選擇器個數相同，或者壓根兒就沒有 ID 選擇器，那么參照下面的第 3 條規則。
    數一下類選擇器（如 .test）的個數，屬性選擇器（如 [type="submit"]）的個數，還有偽類選擇器（如 :hover）的個數，然后將個數加起來，總數最多的，這組選擇器的優先級就最高。如果總是一樣多，或者都為 0，那么參照下面的第 4 條規則。
    數一下標簽選擇器（如 p）的個數，另外還有偽元素選擇器（如 :first-letter）的個數，加起來，總數最多的，優先級就最高。

如果經過上面的計算，優先級還是一樣高，那么遵循后出現的樣式覆蓋先出現的樣式之規則。

現在回過頭來看先前的例子，那四組選擇器的優先級分別為 0001、0012、0102、0103，之所以把優先級數字化，是因為這樣更方便比較。按照自然數法則（事實上它們并非自然數）來比較，1 < 12 < 102 < 103，這樣一來，它們的優先級孰高孰低，就一目了然了。

看完上述內容，你們對CSS屬性簡寫和選擇器的優先級是怎樣的有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。