CSS選擇器

一 前言

目前在作IFE的練習，初步學習到CSS內容，因此作了總結。
這篇博文主要介紹了CSS的選擇器相關概念。

二 選擇器類型

2.1 類型概述

CSS選擇器 能夠被分爲如下類別:
S1 簡單選擇器
  A1 元素選擇器
  A2 類選擇器
  A3 ID選擇器
  A4 通用選擇器

S2 屬性選擇器
  A1 簡單屬性選擇
  A2 具體屬性值
  A3 部分屬性值（子串值 屬性選擇器）

S3 僞類 和 僞元素 選擇器

S4 派生選擇器
  A1 h1,p {xxx}: h1 和 p 同時使用樣式規則，他們是並列關係

S5 組合器
  A1 .xxx .yyy: 後代選擇器，選中 .xxx元素的後代中的 含有.yyy類的元素;
  A2 直接子元素選擇器 A > B;
  A3 相鄰兄弟選擇器 A + B
  A4 普通兄弟選擇器 A ~ B

2.2 類選擇器(注意點)

S1 通用類選擇器 .xxx: 選取全部 含有xxx類屬性 的HTML元素;
S2 元素特定類選擇器 p.xxx: 選取含有xxx類屬性的 p元素， 而不會選中含有xxx類屬性的 span元素
S3 多類選擇器
  HTML結構上 <p class="xxx yyy zzz"> <span class="xxx yyy"> <a class="xxx">
  A1 .xxx: 會對 p 和 a 應用樣式;
  A2 .xxx.yyy: 會對含有 xxx & yyy的元素使用樣式， 這裏就是 p 和 span;
  A3 P.xxx.yyy: 只會對同時含有 xxx & yyy的 p元素使用樣式， 這裏就是 p元素

S4 類選擇器和id選擇器的區別聯繫
  A1 在HTML中，都區分大小寫;
  A2 id屬性的值是惟一的，而class屬性值能夠重複
  A3 通常實際開發狀況下，id給js用，class給css用
  A4 應該根據 「他們是什麼」來爲元素命名，而不是「他們的外觀是什麼」

2.3 屬性選擇器(注意點)

S1 簡單屬性選擇
  A1 a[class/href]: 選中全部 含有 href/class屬性（屬性值不限）的 a元素;
  A2 ahref: 選中 同時含有 href + title屬性（屬性值不限）的 a元素;

S2 具體屬性值
  A1 a[href='xxx']: 選中 含有 href屬性 + 屬性值嚴格等於/徹底匹配xxx的 a元素;
  A2 ahref='xxx': 選中 同時含有 href(屬性值嚴格等於xxx) + title屬性(屬性值嚴格等於yyy)的 a元素;

S3 部分屬性值（子串值 屬性選擇器）
  A1 a[href~='xxx']: 選中 含有 href屬性 + 屬性值中包含xxx便可的 a元素;
  A2 P[lang |='en']: 選中 含有 lang屬性 + 屬性值中等於en/ 以en開頭的 p元素;

2.4 僞類/僞元素選擇器(注意點)

S1 何時使用僞類：當但願某些樣式，在特定狀態下才應用到指定的元素時;

  僞類能夠對一個元素的不一樣狀態/類型進行區分

S2 結構僞類
  A1 :first-child僞類: 見MDN的 :first-child;
  相似的還有
  :last-child僞類;
  :first-of-type僞類 / :last-of-type僞類

  A2 :nth-child(num)
     P:nth-child(2n)表示的含義是選中p其父元素下的 ，偶數位的元素，無論元素類型是否是P;

    thead th:nth-child(-n+2),表示的含義是選中 th其父元素thead下，其2-n(n≥0)數位的元素

  :nth-of-type(num)
    P:nth-of-type(2n)表示的含義是選中p其父元素下的 ，偶數位的元素，數位1是從 元素類型爲P的元素開始計數的

  A3 :nth-last-child / :nth-of-type 同上，不過是從反向開始計數而已

S3 其餘僞類
A1 :target僞類
A2 :empty僞類
A3 :not僞類 見MDN的 :not;

A4 連接僞類的推薦順序是 link - visited - focus - hover - active

三 參考文檔

  1 CSS權威指南;
  2 MDN的 簡單選擇器;
  3 MDN的 屬性選擇器;
  4 MDN的 僞類和僞元素選擇器;
  5 MDN的 組合器和選擇器組;

  6 CSS 派生選擇器;