关于 CSS 嵌套

我们最喜欢的 CSS 预处理器功能之一现在已内置到该语言中：嵌套样式规则。

CSS 嵌套是一种允许您在其他规则中编写 CSS 规则的功能，使您的代码更有条理和可读性。它是相当新的，尚未被所有浏览器支持。

入门

以下是我们将使用 CSS 定位的 HTML 元素的预览。

<div class="container">
    <h1>I am inside container</h1>
    <div class="child_container">
        <h1>I am inside <span>child</span> container</h1>
    </div>
</div>

没有 CSS 嵌套

.container {
    color: red;
}

.container > .child_container {
    color: blue;
}

.container > .child_container span {
    color: orange;
}

使用 CSS 嵌套

.container {
    color: red;

    > .child_container {
        color: blue;

        & span {
            color: orange;
        }
    }
}

输出

在上面的示例中，我们使用直接子选择器在类中定位.child_container类。这归结为。.container>.container > .child_container

我们可以清楚地看到，当我们使用 CSS 嵌套时，代码重复更少，而且它使我们的代码更具可读性。当我们不使用 CSS 嵌套时，我们需要一次又一次地重复复杂的 CSS 选择器以定位特定元素并为其应用不同的样式。CSS 嵌套通过使用&引用父选择器的符号解决了这个问题。

理解

CSS 嵌套中的符号&是在编写嵌套规则时引用父选择器的一种方式。它可用于将选择器附加或前置到父选择器，创建更具体或更复杂的选择器。

.container {
    & .child_container {
        /* .container .child_container */

        & .btn {
          /* .container .child_container .btn */
        }
    }
}

.container {
    .content & {
        /* .content .container */

        .main & {
            /* .main .content .container*/
        }
    }
}

嵌套@media

移动到样式表的不同区域以查找修改选择器及其样式的媒体查询条件可能会非常分散注意力。随着将条件嵌套在上下文中的能力，这种干扰消失了。这将所有样式捆绑到同一位置的元素，使代码更易于理解。

.container {
    @media (width > 300px) {
        color: blue;
    }
}

在上面的例子中，媒体查询只会影响.container类。

结论

CSS 嵌套还可以帮助您进行媒体查询、伪类以及将相关样式组合在一起。但是，您应该注意不要过度使用它或创建过多的特异性，因为这会使您的代码更难维护和覆盖

CSS Nesting 仅在版本 1 中出现。版本 2 将引入更多的语法糖并且可能需要记住更少的规则。

嵌套是对 CSS 语言的一大改进。它对 CSS 的几乎每个架构方面都有创作影响。在有效指定版本 2 之前，需要深入探索和理解这种重大影响。