CSS 指層疊樣式表 (Cascading Style Sheets) ， 定義如何顯示 HTML 元素 ，從而影響頁面的樣式及布局。
CSS的主要內(nèi)容是選擇器，這里所說的選擇器實(shí)際上是一個(gè)統(tǒng)稱，是很多基本概念的集合。

CSS選擇器的一些基本概念

CSS選擇器可以分為4類：

1. 選擇器
   指的是CSS聲明塊前面的標(biāo)簽、類名等。比如：

   body{font-size: 12px;}
   
   .btn{display:inline-block;}
   

   body是標(biāo)簽選擇器,.btn是類選擇器，此外還有屬性選擇器、ID選擇器、偽類選擇器等。

2. 選擇符
   表示選擇器關(guān)系的符號。

   • 空格：表示后代關(guān)系 div .btn{display:inline-block;}；
   • >: 表示父子關(guān)系 div>p{color:red;}；
   • 加號+: 表示相鄰兄弟關(guān)系；
   • ~：表示兄弟關(guān)系；
   • 雙管道||：表示列關(guān)系

3. 偽類
   偽類的特征是其前面會(huì)有一個(gè)冒號:，通常與瀏覽器行為及用戶行為有關(guān)，可以看做是CSS世界的JavaScript。比如：

   input:focus{border-color:blue;}
   
   .btn:hover{color:#fff;}
   
   .btn:active{background:darkblue;}
   

4. 偽元素
   偽元素的特征是其前面會(huì)有兩個(gè)冒號::，常見的偽元素有::before，::after，::first-letter，::first-line等。

選擇器的優(yōu)先級

根據(jù)CSS選擇器的類型、書寫形式及語法，將CSS的優(yōu)先級劃分為6個(gè)等級，等級越高，優(yōu)先級越高。

• 0級：通配選擇器、選擇器和邏輯組合偽類。

  *{color:#333;} // 通配選擇器
  // 選擇符：+、>、~、空格、||
  // :not(),is(),:where等，這些偽類本身不影響CSS優(yōu)先級，影響優(yōu)先級的是括號里的選擇器
  

• 1級：標(biāo)簽選擇器

• 2級：類選擇器、屬性選擇器、偽類，比如：

  .foo{color:#666;}
  [alt="png"]{width:60px;}
  :hover{color:#fff;}
  

• 3級：ID選擇器

• 4級：style屬性內(nèi)聯(lián)
  <span style="color:#333;">優(yōu)先級</span>

• 5級：!important。

  .imp{color:#999; !important;}
  

  !important是頂級優(yōu)先級，能重置JavaScript設(shè)置的樣式，推薦場景是JavaScript設(shè)置無效。

CSS選擇器優(yōu)先級的計(jì)算

對于CSS選擇器優(yōu)先級的計(jì)算，業(yè)內(nèi)比較認(rèn)可的是數(shù)值計(jì)數(shù)法，每一段CSS語句的選擇器都可以對應(yīng)一個(gè)具體的數(shù)值，數(shù)值越大，優(yōu)先級越高。
計(jì)算規(guī)則：每出現(xiàn)一個(gè)0級選擇器+0，1級選擇器+1，2級選擇器+10，3級選擇器+100

提高CSS選擇器優(yōu)先級的技巧：重復(fù)選擇器自身.btn.btn.btn{display:inline-block;}

注意：10個(gè)連續(xù)的1級標(biāo)簽選擇器的優(yōu)先級與1個(gè)類名選擇器并不對等，不同等級的選擇器之間的差異是無法逾越的，實(shí)際開發(fā)中我們不會(huì)連續(xù)寫10個(gè)選擇器的，因此不影響我們在實(shí)際開發(fā)中計(jì)算選擇器的優(yōu)先級。