内容来自《CSS选择器世界》
-
- 选择器優先级相同后来居上
- 场景:状态类名控制、标签受限、层级位置与动态判断
- 随前实现:视觉在前,dom在后
- 小写、短命名同一前缀组合‘-’命名<5;
- 面向属性、语义(html标签、属性、伪类)的命名
- 不要驼峰、id、嵌套、标签、*选择器
- 状态类名:.active自身无样式
- 样式类型:重置、基础、交互變化
-
-
:hover伪类
不适用移动端;增加延时优化体验;
-
- :focus-within:在担负起元素或是任意子元素聚焦时;下拉列表;
- :target 锚点;场景:展开收起,选项卡
- :checked 只能表单,洏
[checked]
任意变化并非实时的;阅读更多;选项卡;单复选框,开关;
- :empty 可有注释before after不能有空格换行。场景:隐藏空元素字段缺失提示
- :where() 作用一樣,但优先级永远是0