• 1、選擇器中符號含義匯總（這部分包含了對選擇器的通用理解）：
  • 1.1、多元素組合符號：（共6個，一個是CSS3的）
    （適用所有元素：ID組合，類組合，屬性組合，標簽組合，偽類組合，以及以上所有混合組合）
    • 沒有符號：且的關系
    • 逗號(,)：或的關系；
    • 空格( )：後代關系（多級）；
    • >：子元素（一級）
    • +：相鄰兄弟，緊隨之後的同級關系（中間不能有其他元素）
    • ~：同級元素（兄弟）通用選擇器。所有相同父元素中，位於 p 元素之後的所有 ul 元素（CSS3才有）
  • 1.2、屬性以及屬性值符號：（共7種）
    • []：包含屬性
      • =：屬性值等於（完全匹配）
      • ~=：多個屬性值（空格分隔）中有一個等於（包含）
      • |=：多個屬性值（連字號 - 分隔 ）中有一個等於（包含）
      • ^=：以其開頭（子串匹配屬性）
      • $=：以其結尾（子串匹配屬性）
      • *=：包含子串（子串匹配屬性）
  • 1.3、冒號(:)：，表示偽類
• 2、基本選擇器：
  • *：通用元素選擇器，匹配任何元素
  • E：標簽選擇器，匹配所有使用E標簽的元素
  • .info：class選擇器，匹配所有class屬性中包含info的元素
  • #footer：id選擇器，匹配所有id屬性等於footer的元素
• 3、多元素的組合選擇器（5個）
  • EF：同時包含E元素和F元素，E和F之間什麽都沒有
    （自己補充）
  • E,F：多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
  • E F：後代元素選擇器（也可稱為派生選擇器），匹配所有屬於E元素後代的F元素，E和F之間用空格分隔
  • E > F：子元素選擇器，匹配所有E元素的子元素F
  • E + F：毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F
• 4、屬性選擇器
  • CSS 2.1
    • E[att]：匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略，比如"[cheacked]"。以下同。）
    • E[att=val]：匹配所有att屬性等於"val"的E元素
    • E[att~=val]：匹配所有att屬性具有多個空格分隔的值、其中一個值等於"val"的E元素
    • E[att|=val]：匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"val"開頭的E元素，主要用於lang屬性，比如"en"、"en-us"、"en-gb"等等
  • CSS 3
    • E[att^="val"]：屬性att的值以"val"開頭的元素
    • E[att$="val"]：屬性att的值以"val"結尾的元素
    • E[att*="val"]：屬性att的值包含"val"字符串的元素
• 5、偽類和偽元素：
  • 5.1 CSS 2.1 偽元素
    • E:first-line：匹配E元素的第一行
    • E:first-letter：匹配E元素的第一個字母
    • E:before：在E元素之前插入生成的內容
    • E:after：在E元素之後插入生成的內容
  • 5.2 CSS 2.1 偽類
    • E:first-child：匹配父元素的第一個子元素
    • E:link：匹配所有未被點擊的鏈接
    • E:visited：匹配所有已被點擊的鏈接
    • E:active：匹配鼠標已經其上按下、還沒有釋放的E元素
    • E:hover：匹配鼠標懸停其上的E元素
    • E:focus：匹配獲得當前焦點的E元素
    • E:lang(c)：匹配lang屬性等於c的E元素
  • 5.3 CSS 3：用戶界面有關偽類
    • E:enabled：匹配表單中激活的元素
    • E:disabled：匹配表單中禁用的元素
    • E:checked：匹配表單中被選中的radio（單選框）或checkbox（復選框）元素
    • E::selection：匹配用戶當前選中的元素
  • 5.4 CSS 3：結構性偽類
    • E:root：匹配文檔的根元素，對於HTML文檔，就是HTML元素
    • E:nth-child(n)：匹配其父元素的第n個子元素，第一個編號為1
    • E:nth-last-child(n)：匹配其父元素的倒數第n個子元素，第一個編號為1
    • E:nth-of-type(n)：與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
    • E:nth-last-of-type(n)：與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
    • E:last-child：匹配父元素的最後一個子元素，等同於:nth-last-child(1)
    • E:first-of-type：匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)
    • E:last-of-type：匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)
    • E:only-child：匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
    • E:only-of-type：匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    • E:empty：匹配一個不包含任何子元素的元素，註意，文本節點也被看作子元素
  • 5.5 CSS 3：反選偽類
    • E:not(s)：匹配不符合當前選擇器的任何元素
  • 5.6 CSS 3：target 偽類
    • E:target：匹配文檔中特定"id"點擊後的效果
• 6、參考：
  • CSS選擇器筆記 - 阮一峰的網絡日誌 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
  • CSS 選擇器參考手冊 http://www.w3school.com.cn/cssref/css_selectors.asp
• 7、結束。

來源： https://workflowy.com/#/21fac3447b76

【CSS選擇器】理解匯總和記錄