在我们开展上一个帮助选择 CSS 嵌套语法的调查之后,CSS 工作组继续就在 CSS 中定义嵌套的最佳方式展开讨论。在讨论过程中,提出了新的语法思路。为帮助工作组从这些语法中进行选择,我们提供一份新的调查问卷。
选项
根据之前的调查问卷结果,我们不再考虑选项 1 和 2。新增了两个选项(四个和五个)。
方法 5:顶级嵌套容器
引入了顶级 @nest
规则,其中包含带有声明和多个嵌套样式规则的 & { … }
代码块。
@nest selector {
& {
property: value;
}
nested-selector {
property: value;
}
}
方案 4:Postfix 提案
在包含声明的主规则之后插入一个包含嵌套规则的额外代码块。
selector {
property: value;
} {
nested-selector {
property: value;
}
}
选项 3:非字母初始值建议
每个嵌套规则本身都明确,具体要求以非符号开头。如果您需要使用类型选择器来启动选择器,可以编写 & div
或 :is(div)
。
selector {
property: value;
& nested-selector {
property: value;
}
}
以上代码段仅用于演示每个提案的基础知识,除新调查问卷外,我们还提供了许多其他示例。
请投票
如要投票,请前往 https://webkit.org/blog/13607/。投票无需注册,请选择“选项 5”“选项 4”或“选项 3”,然后点击“提交”。