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 音频元素