CSS學習（二）選擇符

小兜兜me發表於2021-11-05
CSS
  1. 元素選擇符：以元素名作為選擇符（span{ color: red; }）
  2. 群組選擇符：將兩個選擇符用逗號隔開構成群組（span, div{ color: red; }）
  3. 通用選擇符：通用選擇符（*）將匹配所有元素（*{ color: red; }）
  4. 類選擇符：根據類名匹配元素（.類名{ color: red; }）
  5. ID選擇符：根據ID值匹配元素（#id{ color: red; }）
  6. 屬性選擇符
    • 簡單屬性選擇符：根據是否有這個屬性匹配元素（span[class]{ color: red; }）
    • 精準屬性值選擇：匹配屬性為特定值的元素（精準字串匹配）必須完全一致(span[class="urgent warning"]{ color: red; })
    • 根據部分屬性值選擇：以bar為例
      1. 屬性以bar和一個英文破折號開頭的，或者bar本身（span[class|="bar"]{ color: red; }）
      2. 其值是包含bar的一組詞（span[class~="bar"] { color: red; }）
      3. 其值是包含子串bar（span[class*="bar"] { color: red; }）
      4. 其值以bar開頭（span[class^="bar"] { color: red; }）
      5. 其值以bar結尾（span[class$="bar"] { color: red; }）
  7. 後代選擇符：選擇所有符合條件的後代（span div { color: red; }）
  8. 子代連線符：選擇符合條件的子代（span > div { color: red; }）
  9. 緊鄰同胞連線符：選擇同一個父元素中，緊跟在另一個元素後面的元素（span + div { color: red; }）
  10. 一般同胞連線符：選擇一個元素後面同屬一個父元素的另一個元素(如例子：所有在span後面的div的color都是red) （ span~div { color: red; }）
  11. 偽類選擇符（偽類的效果是把某種幽靈類應用到偽類依附的元素上）：
    1. 結構偽類
      • 選擇根元素（:root）：在html中文件的根元素永遠都是html標籤，但是在xml中，根元素就千奇百怪了
      • 選擇空元素（:empty）：可以使用empty偽類可以選擇沒有任何子代的元素，甚至連文字結點都沒有（包括文字和空白）註釋不算
      • 選擇唯一子代（:only-child）：匹配另一個元素的唯一子元素
      • 選擇唯一某種子元素（:only-of-type）：匹配同胞中唯一的那種元素
      • 選擇第一個子代（:first-child）：匹配一個元素的第一個子代
      • 選擇最後一個子代（:last-child）：匹配一個元素的最後一個子代
      • 選擇第一個某種子元素（:first-of-type）：匹配一個元素的第一個某種子元素
      • 選擇最後一個某種子元素（:last-of-type）：匹配一個元素的最後一個某種子元素
      • 選擇第n個子代（:nth-child(an+b)）：匹配第an+b個子代，a、b是常數，n為1、2、3......
      • 選擇倒數第n個子代（:nth-last-child(an+b)）匹配倒數第an+b個子代，a、b、n同上
      • 選擇第n個某種子元素（:nth-of-type(an+b)）匹配第an+b個某種子元素，a、b、n同上
      • 選擇倒數第n個某種子元素（:nth-last-of-type(an+b)）匹配倒數第an+b個某種子元素，a、b、n同上
    2. 動態偽類
      1. 超連結偽類
        • :link 匹配具有herf屬性的錨點
        • :visited 匹配已訪問的錨點（鑑於隱私保護，偽類中只有color屬性才能生效，其它的都無效）
      2. 使用者操作偽類
        • :focus 當前獲得輸入焦點的元素
        • :hover 滑鼠指標放置其上的元素
        • :active 由使用者輸入啟用的元素
      3. UI狀態偽類
        • :enabled 接受輸入的元素
        • :disabled 不接受輸入的元素
        • :checked 由使用者或文件預設選中的單選框或多選框
        • :indeterminate 既未選中也沒有未選中的單選按鈕或多選按鈕
        • :default 預設選中的單選按鈕、核取方塊或選項
        • :valid 滿足有效性語義的輸入框
        • :invalid 不滿足有效性語義的輸入框
        • :in-range 輸入的值在最大值和最小值之間的輸入框
        • :out-of-range 輸入的值不在最小值到最大值之間的輸入框
        • :required 指代必須輸入值的輸入框
        • :optional 指代無須一定輸入值的輸入框
        • :read-write 可由使用者編輯的輸入框
        • :read-only 不能由使用者編輯的輸入框
    3. :target偽類：給錨點（該錨點有id且網頁中有url(片段識別符號)指向此id）設定樣式
    4. :lang偽類：根據文字使用的語言選擇元素

相關文章