css選擇器優先級

important>內聯>id>class = 屬性 = 僞類 >標籤 = 僞元素 > 通配符(*)css

  1. important聲明 1,0,0,0
  2. ID選擇器 0,1,0,0
  3. 類選擇器 0,0,1,0
  4. 僞類選擇器 0,0,1,0
  5. 屬性選擇器 0,0,1,0
  6. 標籤選擇器 0,0,0,1
  7. 僞元素選擇器 0,0,0,1
  8. 通配符選擇器 0,0,0,0

有人說外部樣式<內部樣式,其實否則,其實外部樣式=內部樣式,誰在前面定義誰就被覆蓋spa

class = 屬性 = 僞類:例如.className的優先級和[class='className']:hover的優先級是同樣的,甚至.className的優先級和[id='idName']:hover的優先級也是同樣code

空格>的優先級是同樣的,例如body bbody>b是同樣的優先級blog

僞元素的優先級和標籤選擇器的優先級同樣,可是咱們每每會遇到一些問題,例如:io

::selection{
    color: red;
}
div{
    color:black!important;
}

被選中的文字仍是紅色的,不會被黑色樣式覆蓋,其緣由是這裏的black!important是做用在了::selection的父元素而不是直接做用在::selection上,class

而咱們調用僞元素的時候必需要寫上僞元素不能像其餘元素同樣只寫它的class或者id或者[attr='~~~'],因此要判斷關於僞元素優先級,都是看它前面的css選擇器優先級import

相關文章
相關標籤/搜索