1. 程式人生 > >CSS選擇器和其優先順序的簡單介紹

CSS選擇器和其優先順序的簡單介紹

CSS的簡單語法:

​ 在一個style標籤中,去編寫CSS內容,最好將style標籤寫在這個head標籤中

<style>
  選擇器{
    屬性名稱:屬性的值;
    屬性名稱2: 屬性的值2;
  }
</style>

CSS選擇器: 幫助我們找到我們要修飾的標籤或者元素。

1.三種常用選擇器:

元素選擇:

元素的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}

ID選擇器:

以#號開頭  ID在整個頁面中必須是唯一的s
#ID的名稱{
  屬性名稱:屬性的值;
  屬性名稱:屬性的值;
}

類選擇器:

以 . 開頭 
.類的名稱{
   屬性名稱:屬性的值;
    屬性名稱:屬性的值;
}

2.CSS的優先順序

按照選擇器搜尋精確度來編寫: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器

就近原則: 哪個離得近,就選用哪個的樣式.

也可以理解為由四個級別和各級別的出現次數決定的。
四個級別分別為:行內選擇符、ID選擇符、類別選擇符、元素選擇符。
優先順序的演算法:
每個規則對應一個初始"四位數":0、0、0、0
若是 行內選擇符,則加1、0、0、0
若是 ID選擇符,則加0、1、0、0
若是 類選擇符/屬性選擇符/偽類選擇符,則分別加0、0、1、0
若是 元素選擇符/偽元素選擇符,則分別加0、0、0、1
演算法:將每條規則中,選擇符對應的數相加後得到的”四位數“,從左到右進行比較,大的優先順序越高。