CSS選擇器規(guī)定了CSS規(guī)則會作用到哪些元素上。

基本選擇器

• 元素選擇器：根據(jù)元素名稱匹配元素

元素 {樣式聲明}

• 類選擇器：根據(jù)元素class屬性中的內(nèi)容匹配元素

.類名 {樣式聲明}

• ID選擇器：根據(jù)元素的ID屬性匹配元素

#ID {樣式聲明}

• 通配選擇器：匹配任意類型的元素

* {樣式聲明}

• 屬性選擇器：根據(jù)屬性名或?qū)傩灾灯ヅ湓?
  • [attr]帶有以 attr 命名的屬性的元素
  • [attr=value]帶有以 attr 命名的，且值為"value"的屬性的元素
  • [attr~=value]帶有以 attr 命名的屬性的元素，并且該屬性是一個以空格作為分隔的值列表，其中至少一個值為"value"
  • [attr|=value]帶有以 attr 命名的屬性的元素，屬性值為“value”或是以“value-”為前綴
  • [attr^=value]帶有以 attr 命名的，且值是以"value"開頭的屬性的元素
  • [attr$=value]帶有以 attr 命名的，且值是以"value"結(jié)尾的屬性的元素
  • [attr*=value]帶有以 attr 命名的，且值包含有"value"的屬性的元素
  • [attr operator value i] 在帶有屬性值的屬性選型選擇器表達式的右括號（]括號）前添加用空格間隔開的字母i(I)可以忽略屬性值的大小寫

img[src$=".svg" i] { /**忽略大小寫**/
  color: pink;
}

組合選擇器

• 多元素選擇器：當(dāng)使用 , 連接兩個元素時使得該選擇器可以同時匹配第一個元素和第二個元素

前方元素 , 目標(biāo)元素 {樣式聲明}

• 相鄰兄弟選擇器：匹配緊跟其前方元素的同胞元素

前方元素 + 目標(biāo)元素 {樣式聲明}

• 通用兄弟選擇器：當(dāng)使用 ~ 連接兩個元素時,它會匹配第二個元素,條件是它必須跟(不一定是緊跟)在第一個元素之后,且他們都有一個共同的父元素

元素 ~ 元素 {樣式聲明}

• 子選擇器：當(dāng)使用 > 選擇符分隔兩個元素時,它只會匹配那些作為第一個元素的直接后代(子元素)的第二元素.

元素1 > 元素2 {樣式聲明}

• 后代選擇器：當(dāng)使用空格連接兩個元素時使得該選擇器可以只匹配那些由第一個元素作為祖先元素的所有第二個元素(后代元素)

元素1 元素2 {樣式聲明}

偽類選擇器

• :link：匹配未被訪問的鏈接

• :visited：匹配已被訪問的鏈接

• :focus：匹配點擊、觸摸、tab鍵選擇的元素

• :hover：匹配鼠標(biāo)懸停其上的元素

• :active：匹配被用戶激活的元素(鼠標(biāo)在其上已經(jīng)按下、還沒有釋放的元素)

為了正確地渲染鏈接元素的樣式需遵循LVFHA的先后順序，即：:link — :visited — :focus — :hover — :active

• :focus-within：匹配獲得焦點，或該元素的后代獲得焦點的元素

• :checked：匹配處于選中狀態(tài)的radio, checkbox或select中的option元素

• :disabled：匹配被禁用的元素

• :enabled：匹配被啟用的元素

• :root：匹配文檔樹的根元素。對于HTML來說，:root 表示html元素，除了優(yōu)先級更高之外，與 html 選擇器相同

• :not()：匹配不符合參數(shù)選擇器X描述的元素

1. X不能包含另外一個否定選擇器
2. X會參與權(quán)重計算

• :nth-child(an+b)：匹配文檔樹中在其之前具有 an+b-1 個兄弟節(jié)點的元素，其中 n >=0

1. :nth-child(0n+3) / :nth-child(3) 匹配第三個元素
2. 1n+0 或簡單的 n 匹配每個元素
3. :nth-child(2n+1) / :nth-child(odd) 匹配奇數(shù)行
4. :nth-child(2n) / :nth-child(even) 匹配偶數(shù)行
5. :nth-child(-n+3) 匹配前三個子元素

• :nth-of-type(an+b)：匹配文檔樹中在其之前具有 an+b-1 個相同標(biāo)簽的元素，其中 n >=0

1. E:nth-of-type(2) 匹配第二個標(biāo)簽為E的元素
2. .class:nth-of-type(2) 匹配相同標(biāo)簽的第二個且該(第二個)標(biāo)簽的類名匹配.class

<style>
      .item:nth-of-type(3){
        color:red;
      }
</style>
<div>
      <h1>標(biāo)題</h1>
      <p class="item">這是鍛若</p>
      <p>這是鍛若</p>
      <span>這是span</span>
      <span class="item">這是span</span>
      <span class="item">這是span</span> <!-- 紅色 -->
      <p class="item">這是鍛若</p> <!-- 紅色 -->
      <p class="item">這是鍛若</p>
      <p class="item">這是鍛若</p>
      <h1 class="item">標(biāo)題</h1>
      <h1>標(biāo)題</h1> <!-- 不是紅色 -->
  </div>

偽元素選擇器

• ::before :before

• ::after :after

• ::first-letter :first-letter：匹配某塊對象第一行的第一個字母，并且文字所處的行之前沒有其他內(nèi)容（如圖片和內(nèi)聯(lián)的表格）

• ::first-line :first-line：匹配某塊對象第一行

• ::placeholder：匹配一個表單元素的占位文本

• ::selection：匹配文檔中被用戶高亮的部分(比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分)

注意 塊對象指display: block, inline-block...