內容導讀
回答：在開發當中，我們經常會遇到設置的樣式出來的情況，其實我們之前可能已經為某個元素設定了一個樣式，但是該樣式的優先級比較高，那麼規定好權重，在開發時，就可以根據權重來計算優先級大小，從而避免各種樣式覆蓋的情況。3.1 優先級分類 第一優先級：無條件優先的屬性只需要在屬性後面使用!important。(它會覆蓋頁面內任何位置定義的元素樣式) 第二優先級：在html中給元素標籤加style，即內聯樣式。(該方法會造成css難以管理，所以不推薦使用) 第三優先級：由一個或多個id選擇器來定義。第五優先級：由一個或多個類型選擇器定義。1.!important > 內聯樣式>id選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性 2.然而大多數情況下，我們常見的選擇器都是組合在一起的，於是瞭解具體選擇器代表的權值可以方便我們在開發時進行簡單的計算。
一、CSS的三大特性？
1.1 繼承：子類能夠繼承父類的某些樣式
1.2 優先級：不同選擇器定義的樣式具有不同的優先級數量
1.3 層疊：當優先級數量相同時，後面定義的樣式的覆蓋前面定義的樣式
二、CSS有哪些選擇器？
2.1 元素選擇器：div、p、img、a等
2.2 id選擇器：#id1、#id2
2.3 class選擇器：.class1、.class2
2.4 全局選擇器：*
2.5 群組選擇器：擁有相同樣式的元素分組顯示，用逗號隔開 div,p,a{color:#000;}
2.6 屬性選擇器：
a[attribute=value]:屬性值為value的屬性a[attribute~=value]:屬性值包含value的屬性a[attribute|=value]:屬性值以value開頭的屬性a[attribute*=value]:屬性值包含value的屬性a[attribute^=value]:屬性值以value開頭的屬性a[attribute$=value]:屬性值以value結尾的屬性
2.7 後代選擇器：子元素和父元素之前用空格分開 div p
2.8 子元素選擇器：子元素和父元素用大於號隔開 div > p
後代選擇器選擇所有符合添加的子元素，包括子元素的子元素；然而子元素選擇器只選擇符合條件的直接後代。
2.9 相鄰同胞選擇器：兄弟元素之間用加號隔開h1+p
2.10 偽類選擇器：a:link、a:visited、a:active、a:hover、input:focus
2.11 偽元素選擇器：
div:after：在div元素之後插入內容
div:before：在div元素之前插入內容
p:first-letter：為p元素的文本首字母添加樣式
p:first-line：為p元素的文本首行添加樣式
三、選擇器權重
提問：為什麼不同的選擇器為什麼會有權重？
回答：在開發當中，我們經常會遇到設置的樣式出來的情況，其實我們之前可能已經為某個元素設定了一個樣式，但是該樣式的優先級比較高，那麼規定好權重，在開發時，就可以根據權重來計算優先級大小，從而避免各種樣式覆蓋的情況。
3.1 優先級分類
第一優先級：無條件優先的屬性只需要在屬性後面使用!important。(它會覆蓋頁面內任何位置定義的元素樣式)
第二優先級：在html中給元素標籤加style，即內聯樣式。(該方法會造成css難以管理，所以不推薦使用)
第三優先級：由一個或多個id選擇器來定義。
第四優先級：由一個或多個類選擇器、屬性選擇器、偽類選擇器定義。
第五優先級：由一個或多個類型選擇器定義。
第六優先級：通配選擇器。
1.!important > 內聯樣式>id選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性
2.然而大多數情況下，我們常見的選擇器都是組合在一起的，於是瞭解具體選擇器代表的權值可以方便我們在開發時進行簡單的計算。
3.2 選擇器權重的等級
第一等級：代表內聯樣式，如style=""，權值為1000
第二等級：代表id選擇器，如#id1，權值為100
第三等級：代表class、偽類和屬性選擇器，權值為10
第四等級：代表標籤選擇器和偽元素選擇器，權值為1
通用選擇器、子元素選擇器和相鄰同胞選擇器並不在這個等級中，所以權重為0
四、選擇器優先級的簡單計算
那麼計算下面的元素的優先級
nav ul#nav li.checked a:hover{color:#red;}
圖片.png
閱讀更多 浮生偷閒 的文章
