CSS選擇器與僞類使用技巧

內容來自《CSS選擇器世界》

css選擇符辨析

• (空格) 後代

  • 選擇器優先級相同，後來居上
  • document.querySelector('#myId').querySelectorAll(':scope div div')

• > 子

  • 主要目的：避免衝突
  • 場景：狀態類名控制、標籤受限、層級位置與動態判斷

• + 相鄰

  • 爲兼容IE8實現:first-child

• ~ 隨後

  • 隨前實現：視覺在前，dom在後

• || 列

  • 跨列td選擇

選擇器模式

• amcss [am-button~="large"]{}

• 正則:開頭 [attr^="val"]; 結束 [attr$="val"]; 包含 [attr*="val"]

  • 忽略大小寫 [attr~="val" i]
  • 搜索過濾

css選擇器最佳實踐

• 小寫、短命名，同一前綴組合‘-’命名＜5;
• 面向屬性、語義(html標籤、屬性、僞類)的命名
• 不要駝峯、id、嵌套、標籤、*選擇器
• 狀態類名：.active自身無樣式
• 樣式類型：重置、基礎、交互變化

/* 網站變量 */
:root{--base-color:#4c5161;}
/* 樣式重置 */
body,p,dd,dl,h1,...,ol,ul{margin:0}
/* 通用結構 */
.cs-header{}
.cs-main{}
.cs-footer{}
/* 組件樣式 */
.cs-icon{}
.cs-button{}
.cs-dialog{}
/* 模塊樣式 */
.cs-module-header{}
.cs-module-title{}
.cs-module-x{}
/* 業務樣式 */
.cs-some-...
/* css樣式庫 */
.dn{display:none}
.db{display:block}
.dib{display:inline-block}
.fl{float:left}

僞類

• 用戶行爲

  • :hover 不適用移動端；增加延時優化體驗；
  • :active 支持任意元素;數據上報;樣式技巧：box-shadow,linear-gradient,outline;
  • :focus 非disabled表單元素，href的<a>,<area>,contenteditable的普通元素;鼠標經過行爲的鍵盤訪問
  • :focus-within:在擔負起元素或是任意子元素聚焦時；下拉列表；
  • :focus-visible:鍵盤訪問的聚焦:focus:not(:focus-visible){outline:0}

• URL定位

  • :link和:visited：和:hover,:active優先級：LVHA
  • :any-link::link對已訪問的無效，只作用於<a>
  • :target 錨點；場景：展開收起，選項卡
  • :target-within target或後代元素，目前暫不支持

• 輸入

  • :enabled和:disabled chrome下enable影響a,ie下fieldset不支持，contenteditable="true"不匹配
  • :read-only和:read-write:readonly可被表單提交，disabled不能；
  • :placeholder-shown 場景：meterial 風格；空值判斷；
  • :default selected checked必須爲true 場景：標記支付方式”推薦“
  • :checked 只能表單,而[checked]任意，變化並非實時的；閱讀更多；選項卡；單複選框，開關；
  • :indeterminate checkbox.indeterminate=true;單選所有name的都沒選中時匹配，沒有name沒選中也匹配；未選中提示文案；

• 輸入值驗證

  • :valid和invalid (:user-invalid :blank 尚未支持)
  • :in-range和:out-of-range
  • :required和:optional
  • :user-invalid和:blank

• 樹結構

  • :root 文檔根元素，xhtml,svg。Shadow DOM不行。root負責css變量，html負責樣式
  • :empty 可有註釋before after，不能有空格換行。場景：隱藏空元素，字段缺失提示

  • 子索引

    • :first-child
    • :last-child
    • :only-child 沒有任何兄弟元素
    • :nth-child() 只適用於內容動態的，支持 odd,even,An+B;
    • :nth-last-child() 動態列表數量匹配（聊天羣頭像）li:only-child{} li:first-child:nth-last-child(2){}

  • 匹配類型

    • :first-of-type和last-of-type
    • :only-of-type
    • :nth-of-type()和nth-last-of-type()

• 邏輯組合

  • :not()
  • :is() 簡化 .is(.cs-a,.cs-b) >img
  • :where() 作用一樣，但優先級永遠是0

• 其他

  • :host Shadow DOM 根元素
  • :host() Shadow DOM 根元素匹配僞類
  • :host-context() Shadow DOM 根元素上下文匹配僞類
  • :fullscreen 全屏
  • :dir(ltr|rtl) 方向
  • :lang() 語言
  • :playing :paused 音頻元素