CSS

已经很久没有关注CSS本身的发展了，看到一篇国外的文章介绍了CSS Nesting特性，感觉挺有意思的。 CSS Nesting模块定义了一种用于嵌套选择器的语法，提供了将一个样式规则嵌套在另一个样式规则内部的能力，子规则的选择器相对于父规则的选择器。 CSS Nesting与CSS预处理器（如Sass）不同，它是由浏览器解析的，而不是由CSS预处理器预先编译的。 CSS Nesting有助于提高CSS样式表的可读性、模块化和可维护性。它还可能有助于减小CSS文件的大小，从而减少用户下载的数据量。 我们都使用过Sass，Less这些CSS预处理工具，写CSS非常的舒服，用多了之后你可能已经忘记了原始的CSS如何写的，这些CSS预处理工具极大的提升了前端的开发效率和体验。 浏览器支持情况 使用Can I use网站查看哪些浏览器支持了CSS Nesting的特性 我们可以看到Firefox是支持得相对较好的，在多个版本都添加了CSS Nesting的支持，其次是Safari的技术预览版，其他浏览器也在跟进，像Chrome、Edge、Opera都已经部分支持CSS Nesting的功能。 CSS Nesting应用 Sep 20, 2023年9月20号，Safari Technology Preview 179发布了一个对CSS Nesting的更新，添加了对新的“宽松解析行为”的支持。这意味着你不再需要担心每个嵌套选择器是否以符号开头。它意味着现在像这样的嵌套CSS将正常工作： article { h1 { font-size: 1.8rem; } } 上面的代码等同于 article h1 { font-size: 1.8rem; } 而在之前的版本当中， h1 标签前面必须有一个符号出现才可以实现嵌套的特性 /* 更早的版本 */ article { & h1 { font-size: 1.8rem; } } 现在已经完全不需要前置的符号了，这里的符号指的是+ > ~ 等。 官方的草案给出了CSS Nesting的语法： main { div { ... } .bar { ... } #baz { ...} :has(p) { ... } ::backdrop { ... } [lang|="zh"] { ... } * { ... } + article { ... } > p { ... } ~ main { ... } } 一些例子 让我们来看一些例子，以更好的展示CSS Nesting的工作。 ...