原生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技术预览版。

使用类嵌套元素

图片

.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中是如何呈现的。

图片

嵌套示例：Post Content

第一个尝试CSS嵌套的例子之一是对帖子的正文内容设置样式。想象一下，一篇文章有正文标题、文本、图像、引用等等。

图片

标题

我们倾向于像下面这样设计标题：

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  /* styles here */
}

使用CSS嵌套，它更简单：

.post-content {
  h1,
  h2,
  h3,
  h4 {
    color: var(--heading-color);
    font-weight: var(--heading-font-bold);
    margin-bottom: var(--size-2);
  }
}

我们也可以使用:is()选择器来做同样的事情。

.post-content {
  :is(h1, h2, h3, h4) {
    color: var(--heading-color);
    font-weight: var(--heading-font-bold);
    margin-bottom: var(--size-2);
  }
}

段落元素

一个常见的情况是设置段落内部的链接样式。在这种情况下，CSS的嵌套功能非常好用。

.post-content {
  & p {
    color: var(--color-black);

    & a {
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

链接可能也需要悬停或焦点效果。

.post-content {
  & p {
    color: var(--color-black);

    & a {
      font-weight: bold;
      text-decoration: underline;

      &:hover {
        /* hover styles */
      }
    }
  }
}

我们还可以用在嵌套媒体查询。

.post-content {
  & p {
    /* base styles */

    @media (min-width: 400px) {
      /* do something */
    }
  }
}

帖子图片

帖子图包含一个图像和一个可选的