原生CSS嵌套简介

原文链接：www.sitepoint.com/an-introduc…

嵌套是使用Sass等CSS预处理器的核心原因之一。现在，该功能已经以类似的语法出现在标准浏览器CSS中。你能否在构建系统时放弃对预处理器的依赖？

CSS嵌套可以节省输入时间，并使语法更易于阅读和维护。迄今为止，你必须像这样键入完整的选择器路径：

.parent1 .child1,
.parent2 .child1 {
  color: red;
}

.parent1 .child2,
.parent2 .child2 {
  color: green;
}

.parent1 .child2:hover,
.parent2 .child2:hover {
  color: blue;
}

现在，你可以将子选择器嵌套在父选择器中，比如：

.parent1, .parent2 {

  .child1 {
    color: red;
  }

  .child2 {
    color: green;

    &:hover {
      color: blue;
    }
  }

}

你可以嵌套任意层级的选择器，但要注意不要超过两到三级。嵌套层级没有技术层面的限制，但是会让代码更难阅读，并且让最终CSS变得很冗长。

直到2023年四月，暂没有浏览器支持CSS嵌套语法。你需要使用 CSS 预处理器（如 Sass、Less 或 PostCSS）进行构建步骤，以便将嵌套代码转换为常规的全选择器语法。嵌套功能现已在Chrome 112+和Safari 16.5+中实现，Firefox将在2023年晚些时候提供支持。

CSS原生嵌套规则

你可以将任何选择器嵌套到另一个选择器中，但必须以符号开头，如&，.（用于HTML class），#（用于HTML id），@（用于媒体查询），:，::，*，+，~，>，或 [。换句话说，它不能直接引用HTML元素。下面的代码无效，<p>选择器不会被解析：

.parent1 {

  /* FAILS */
  p {
    color: blue;
  }

}

修复该问题最简单的方法就是使用&，其与Sass相同的方式引用当前选择器：

.parent1 {

  /* WORKS */
  & p {
    color: blue;
  }

}

或者，可以这么解决：

• > p - 但这将仅对 .parent1 的直接子元素进行样式调整
• :is(p) - 但是:is()使用最优先选择器的优先级
• :where(p) - 但是:where()的优先级为0

在这个简单的示例中，它们都可以工作，但在以后使用更复杂的样式表时，你可能会遇到优先级问题。

&还允许你在父选择器上定位伪元素和伪类。例如：

p.my-element {

  &::after {}

  &:hover {}

  &:target {}

}

如果你不使用&，你的目标将是选择器的所有子元素，而不是p.my-element本身。(在Sass中也会出现同样的情况）。

需要注意的是，你可以在选择器的任何位置使用&，比如：

.child1 {

  .parent3 & {
    color: red;
  }

}

这会转换为下列非嵌套语法：

.parent3 .child1 { color: red; }

你甚至可以在一个选择器中使用多个&符：

ul {

  & li & {
    color: blue;
  }

}

这会作用于嵌套的<ul>元素（ul li ul），如果你不想被逼疯我建议还是不要这么使用了！

最后，你可以嵌套媒体查询。下面的代码为段落元素应用了cyan颜色，除非浏览器宽度至少为800px，否则将变为purple：

p {

  color: cyan;

  @media (min-width: 800px) {
    color: purple;
  }

}

CSS原生嵌套问题

原生嵌套在:is()中包裹父选择器，这可能会导致与Sass输出的差异。

考虑下列的嵌套代码：

.parent1, #parent2 {
  .child1 {}
}

在浏览器中解析时，这实际上变成了以下内容：

:is(.parent1, #parent2) .child1 {}

.parent1中的.child1元素的优先级为101，因为:is()使用了其最优先选择器的优先级--在本例中，是#parent2 ID。

Sass编译的代码与此相同：

.parent1 .child1,
#parent2 .child1 {
}

在本例中，.parent1 中的 .child1 元素的特异性为 002，因为它匹配两个类（#parent2 被忽略）。它的选择器比原生选项的优先级低，在级联中被覆盖的可能性更大。

你可能还会遇到一个更微妙的问题。考虑下列代码：

.parent .child {

  .grandparent & {}

}

原生CSS等价于：

.grandparent :is(.parent .child) {}

这与下列排序错误的HTML元素相匹配：

<div class="parent">
  <div class="grandparent">
    <div class="child">MATCH</div>
  </div>
</div>

由于CSS解析器会执行以下操作，因此MATCH会改变样式：

1. 在DOM层次结构中的任意位置，找到所有类为child的元素，同时祖先元素的类为parent。
2. 在找到包含MATCH的元素后，解析器会检查该元素是否有一个祖先为grandparent的元素--同样是在DOM层次结构中的任意位置。找到后，解析器会相应地对该元素应用样式。

在Sass中不是这种情况，最终会编译成这样：

.grandparent .parent .child {}

上面的HTML没有样式化，因为元素的类没有遵循严格的grandparent、parent和child顺序。

最后，Sass使用字符串替换，所以像下面这样的声明是有效的，可以匹配任何具有outer-space类的元素：

.outer {
  &-space { color: black; }
}

而原生CSS会忽略&-space选择器。

还需要CSS预处理器吗

在短期内，现有的CSS预处理器仍然必不可少。

Sass开发团队已经宣布，他们将支持.css文件中的原生CSS嵌套，并按原样输出代码。他们将一如既往地编译嵌套的SCSS代码，以避免破坏现有代码库，但当全球浏览器支持率达到98%时，他们将开始输出:is()选择器。

我猜测PostCSS插件等预处理器目前会扩展嵌套代码，但当浏览器支持率越来越高时，就会移除该功能。

当然，使用预处理器还有其他很好的理由--比如将部分代码捆绑到单一文件中，以及精简代码。但如果嵌套是你唯一需要的功能，那么你当然可以考虑在小型项目中使用本地CSS。

总结

CSS嵌套是最有用、最实用的预处理器功能之一。浏览器供应商努力创造了一个本地CSS版本，其相似性足以让Web开发人员满意。虽然两者之间存在细微差别，而且在使用（过于）复杂的选择器时可能会遇到不寻常的优先级问题，但很少有代码库需要进行彻底修改。

原生嵌套可能会让你重新考虑对CSS预处理器的需求，但它们仍能提供其他好处。Sass和类似工具仍然是大多数开发人员工具包的重要组成部分。

以上就是本文的全部内容。如果对你有所帮助，欢迎点赞、收藏、转发~