CSS嵌套模块（Nesting Module）

前言

原始 css 比较质朴，出来了很多方言，如 scss 等。css 的官方标准组织终于干活了，然后就有了 css nesting module 标准。

不过这个标准还没有正式，所以现在通过 postcss 工具来模拟实现它。具体而言就是 postcss-nesting 插件。

语法

嵌套

a.b c .d {color:red;}
a.b c e {color:blue;}
/* 改进 */
a.b c{
	.d {color:red;}
	& e {color:blue;}
}

1. & ：外层元素占位符，例：a.b c，即用 a.b c 替换掉 &
   1. 后代是默认关系（但语法上要求有些情况需要使用 & 符号占位）
   2. 非标识符开头可以省略 &，如 .d 可以，e 不可以
   3. & 发挥占位符的作用，不一定是放在开始位置，也不一定只能用一次
2. 嵌套规则组成（类似二元关系 a + b）
   1. 组合器：
      1. 默认：后代
      2. >：大郎
      3. ~：弟弟们
      4. +：相邻
   2. 外层选择器：外层 a.b c
   3. 嵌套选择器：内层 .d 或 e
3. css 选择器类型
   1. *：所有东西
   2. a：标签
   3. .a：class 属性指定的名称
   4. #a：id 属性指定的名称
   5. [a]: 具有 a 属性
      1. [a="xx"]：具有 a 属性且值为 xx 时
   6. a:visited ：伪类（动态信息）
   7. p::first-line ：伪元素（概念元素）
   8. a.a: a 标签，且类 .a（交集）
   9. a,.a: a 标签，或类 .a（并集）

At 规则

1. @media：媒体条件
2. @supports：指定条件
3. @layer：级联层
4. @scope：
5. @page：打印规则
6. @container
7. @charset：字符编码

a {
	color:red;
	@media (orientation: landscape) {
		color:blue;
	}
}
/* 相当 */
a {
	color:color
	@media (orientation: landscape) {
		& {
			color:blue;
		}
	}
}

伪类和伪元素

处于某种状态下才有效的伪类，也可以视为条件语句。格式 :xxx

由 css 动态添加的元素（具有 content 内容属性），称为伪元素。格式 ::xxx

规则： & 无法替代伪类和伪元素。

状态：

1. :link：未访问链接
2. :visited：已访问链接
3. :hover：指针悬停之上
4. :active：激活链接
5. :any-link：可链接元素
6. :local-link：本地链接
7. :target：当前标题
8. :focus：获得焦点
9. :focus-within：子元素获得焦点时
10. :focus-visible：焦点框
11. :checked：选中
12. :default：默认元素
13. :defined：已定义
14. :indeterminate：未赋值
15. :disabled：禁用
16. :enabled：启用
17. :valid：验证
18. :out-of-range：数值超范围
19. :in-range：范围内
20. :fullscreen：全屏
21. :modal：模态对话框

属性：

1. :placeholder-shown：占位提示符
2. :required：必填
3. :optional：可选
4. :lang()：语言
5. :autofill：内容为自动填充

逻辑元素：

1. :root：根元素
2. :first：打印的首页
3. :first-child：兄弟元素中的第一项
4. :first-of-type：同类元素中的第一个
5. :last-child：逆序版
6. :last-of-type：逆序版
7. :only-child：孤儿
8. :only-of-type：孤类
9. :empty：无子元素
10. :nth-child：第 x 个元素。参数 1n+3 => 1 * n + 3，n 从 0 开始递增，下标从 1 开始
11. :nth-of-type：同类元素第 x 个。
12. :nth-last-child：逆序版
13. :nth-last-of-type：逆序版

函数：

1. :is()：集合（元素最高优先级，容错）
2. :not()：不在集合中的其他元素（不容错）
3. :where()：集合（优先级 0，容错）
4. :has()：具备某种组合关系

伪元素：

1. ::after：在元素后添加
2. ::before：前
3. ::backdrop：全屏时渲染
4. ::cue：字幕
5. ::file-selector-button：打开文件选择对话框按钮
6. ::first-letter：首字母
7. ::first-line：首行
8. ::marker：小标签（如列表前的符号）
9. ::selection：选中的文字

参考

1. css nesting module 标准：https://www.w3.org/TR/css-nesting-1/