FE.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的,,contenteditable的普通元素;鼠标经过行为的键盘访问

URL定位

:link和:visited：和:hover,:active优先级：LVHA

:any-link::link对已访问的无效，只作用于

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

FE.CSS-选择器与伪类使用技巧

css选择符辨析

选择器模式

css选择器最佳实践

伪类

你可能感兴趣的:(css)