原生CSS嵌套使用，你学明白了吗？ _CSS

如果你是一个前端开发人员，那么你应该使用过css预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能，我一直都在使用CSS预处理器。
今年所有的主流浏览器都支持原生CSS嵌套：Chrome、Firefox和Safari 。这是一个重要的CSS功能，这将使编写CSS更加容易。在本文中我将记录到目前为止我所学到的关于CSS嵌套的知识，并与您分享我的发现，包括使用案例和示例。
介绍CSS嵌套是许多开发人员期待已久的功能之一。我们曾经依赖于CSS预处理器，如Sass或Less 。让我们来回顾一下以前的做法：
请看下面的例子。我们有一个图标嵌套在选择器.nav__item中。
.nav__item {.icon {display: flex;padding: 1rem;}}以上是一个Sass语法的代码。编译后，它在浏览器中看起来像下面这样：
.nav__item .icon {display: flex;padding: 1rem;}使用原生CSS嵌套，相同的CSS将按原样工作。这里有一个图，显示了原生CSS嵌套和浏览器DevTools之间的比较。

文章插图
图片
请注意浏览器显示CSS的方式与CSS代码中的显示方式几乎一致。
如果这个CSS是用Sass编译的，浏览器会显示如下：

文章插图
CSS嵌套的好处在我看来，嵌套 CSS 有一些很合理的理由，使其变得有用：

更容易阅读CSS
风格一致
确定特定样式的作用域
对没有类或ID的html元素添加样式

CSS嵌套规则为了让你了解CSS嵌套，我将尝试提供不同CSS问题的案例，以及嵌套如何帮助解决这些问题。
首先你需要学习 &符号，有多数情况下，这个符号是必要的。
嵌套没有类或ID的元素

文章插图
在这个例子中，<a>元素是通过.nav__item设置样式。要使CSS有效，使用&符号是可选的。
nav__item {& a {display: block;padding: 1.5rem 1rem;}}/* 等同于 */.nav__item a {}您也可以选择不使用&符号：
.nav__item {a {display: block;padding: 1.5rem 1rem;}}/* 等同于 */.nav__item a {}请注意这是一个最近的更新，被称为宽松的CSS嵌套。它适用于最新的Chrome Canary和Safari技术预览版。
使用类嵌套元素

文章插图
以前面的例子为例，但假设<a>元素有一个HTML类。
.nav__item {.link {display: block;padding: 1.5rem 1rem;}}/* 等同于 */.nav__item .link {}这里不需要使用& ，只有类名称也正常生效。
嵌套CSS组合器CSS原生嵌套的一个好处是可以使用组合器。让我们来看一些例子。
在下面的例子中，我想选择.nav__item的每个元素，它前面有另一个具有相同类的元素。因此我使用了相邻兄弟选择器。

文章插图
在原生CSS嵌套中，我们可以使用&符号来模拟这种效果。请注意我重复使用了它两次。
.nav__item {& + & {border-left: 2px solid;}}魔术发生在第二次重复的& 。在这里浏览器将理解我想使用相邻的兄弟选择器。让我给你看一个图表来说明这一点：

文章插图
另一个例子是嵌套子组合器。它可以选择元素的直接子元素。
.nav__item {> a {padding: 1rem;}}嵌套示例：Active, Focus, Hover:active、:focus和:hover是通过用户操作激活的CSS伪类。

文章插图
使用CSS嵌套，可以一次嵌套它们以避免代码重复。让我们以:hover为例：
button {&:hover {background-color: var(--bg-color);}&:focus {outline: solid 2px;}}使用预处理器进行嵌套时的区别在于浏览器将像这样渲染它：
button:hover {background-color: var(--bg-color);}button:focus {outline: solid 2px;}让我们来看看原生CSS嵌套在Chrome、Safari和Firefox中是如何呈现的。