CSS原生嵌套

1. CSS 原生嵌套概述

CSS 原生嵌套（CSS Nesting）允许在选择器内部嵌套子选择器，无需预处理器。

.card {
  padding: 1rem;
  background: white;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

2. 嵌套规则

2.1 & 符号

& 代表父选择器：

.btn {
  background: blue;

  &:hover {
    background: darkblue;
  }
  &:active {
    transform: scale(0.98);
  }
  &--primary {
    background: green;
  }
  &__icon {
    margin-right: 8px;
  }
}

2.2 隐式嵌套

不带 & 的嵌套会自动在前面添加父选择器：

.card {
  .title {
    font-size: 1.5rem;
  }
  /* 等价于 .card .title */
}

2.3 嵌套 @规则

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 750px;
  }
  @media (min-width: 1024px) {
    width: 960px;
  }
  @supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

3. 与预处理器嵌套的区别

4. 最佳实践

• 嵌套深度不超过 3 层
• 优先使用 & 显式引用
• 善用 @规则嵌套简化媒体查询