原生 CSS 中类似 Sass 的嵌套

如果你和我一样觉得 Sass 的 CSS 嵌套功能非常有用，那么你一定会很高兴地知道，我们的好日子就要来了。ahC28资讯网——每日最新资讯28at.com

因此，如果你不知道，Sass 的 CSS 嵌套功能允许您将 CSS 选择器嵌套在其他选择器中。例如，你可以这样写：ahC28资讯网——每日最新资讯28at.com

.parent {    .child {        color: red;    }}

这将被编译成以下 CSS。ahC28资讯网——每日最新资讯28at.com

.parent .child {    color: red;}

当你想为某一特定元素编写 CSS 时，如果该元素是另一元素的子元素，这就非常有用了。你不必反复编写父选择器。只需将子选择器嵌套在父选择器中就可以了。ahC28资讯网——每日最新资讯28at.com

原生 CSS 嵌套

现在，原生 CSS 也出现了类似的功能。CSS 嵌套模块[1]现已在 Safari 技术预览版 162 和 Chrome Dev 中附带（通过在浏览器中启用“Experimental Web Platform features（实验性 Web 平台功能）”标志）。ahC28资讯网——每日最新资讯28at.com

启用后，你可以像这样在原生 CSS 中编写上述类似 Sass 的代码。ahC28资讯网——每日最新资讯28at.com

.parent {    .child {        color: red;    }    #childWithId {        color: red;    }}

很整洁，对吧？ahC28资讯网——每日最新资讯28at.com

但也有一些注意事项。ahC28资讯网——每日最新资讯28at.com

局限性

要使用 CSS 嵌套，你必须嵌套仅以以下符号开头的选择器：.、:、[、>、+、~、#、*。这是因为浏览器解析 CSS 的方式。如果你嵌套的选择器不以上述任何符号（例如 p、span、`div`` 等）开头，则嵌套将被忽略。ahC28资讯网——每日最新资讯28at.com

为了解决这个问题，你可以在子选择器前面添加 & ，如下所示。ahC28资讯网——每日最新资讯28at.com

.parent {    & span {        color: red;    }}

上面的代码将被编译成下面的CSS。ahC28资讯网——每日最新资讯28at.com

.parent span {    color: red;}

这也适用于如下场景。ahC28资讯网——每日最新资讯28at.com

ul {  padding-left: 1em;}.component ul {  padding-left: 0;}

可以看出，这里的 ul 选择器并没有嵌套在 .component 选择器中。ahC28资讯网——每日最新资讯28at.com

要使 ul 选择器嵌套在 .component 选择器内，您可以将 & 附加到 .component 选择器，如下所示。ahC28资讯网——每日最新资讯28at.com

ul {  padding-left: 1em;  .component & {    padding-left: 0;  } }

差不多就是这样了！ahC28资讯网——每日最新资讯28at.com

由于 CSS Nesting Module 仍处于草案阶段，因此不建议在生产中使用它。但很高兴知道，一旦该功能足够成熟，它就会出现在原生 CSS 中。ahC28资讯网——每日最新资讯28at.com

在此之前，您可以在支持的浏览器之一中对其进行测试，并在 bugs.webkit.org[2] 或 bugs.chromium.org[3] 上提交你的反馈或问题。ahC28资讯网——每日最新资讯28at.com

图片ahC28资讯网——每日最新资讯28at.com

Reference

[1]CSS 嵌套模块:https://drafts.csswg.org/css-nesting-1/ahC28资讯网——每日最新资讯28at.com

[2]bugs.webkit.org:http://bugs.webkit.org/ahC28资讯网——每日最新资讯28at.com

[3]bugs.chromium.org:https://bugs.chromium.org/p/chromium/issues/listahC28资讯网——每日最新资讯28at.com

ahC28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-44393-0.html原生 CSS 中类似 Sass 的嵌套

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 系统架构达人亲授：多电商活动从容应对的顶级秘籍！

下一篇： Spring Boot + MyBatis-Plus 实现 MySQL 主从复制动态数据源切换