CSS 原生嵌套（CSS Nesting）

基本语法

/* 传统写法 */
.parent {
  color: red;
}

.parent .child {
  color: blue;
}

.parent:hover {
  color: green;
}

/* 使用嵌套写法 */
.parent {
  color: red;
  
  .child {
    color: blue;
  }
  
  &:hover {
    color: green;
  }
}

浏览器支持情况

当前支持状态（2024）

• Chrome 120+ ✅ 完全支持
• Firefox 117+ ✅ 完全支持
• Safari 17.2+ ✅ 完全支持
• Edge 120+ ✅ 完全支持
• Opera 106+ ✅ 完全支持

完整的嵌套语法

基本嵌套

/* 元素嵌套 */
.card {
  padding: 20px;
  
  .header {
    font-size: 24px;
    
    .title {
      color: #333;
      
      span {
        font-weight: bold;
      }
    }
  }
  
  .content {
    margin-top: 10px;
    
    p {
      line-height: 1.6;
    }
  }
}

使用 & 符号（父选择器引用）

/* 伪类和伪元素 */
.button {
  background: blue;
  color: white;
  
  &:hover {
    background: darkblue;
  }
  
  &:active {
    transform: scale(0.98);
  }
  
  &:focus {
    outline: 2px solid orange;
  }
  
  &::before {
    content: "→ ";
  }
}

/* 连接类名 */
.btn {
  &-primary {
    background: blue;
  }
  
  &-secondary {
    background: gray;
  }
  
  &-large {
    padding: 15px 30px;
    font-size: 18px;
  }
}

媒体查询嵌套

.container {
  width: 100%;
  padding: 20px;
  
  @media (min-width: 768px) {
    max-width: 750px;
    margin: 0 auto;
    
    .sidebar {
      width: 250px;
      float: left;
    }
    
    .content {
      margin-left: 270px;
    }
  }
  
  @media (min-width: 1200px) {
    max-width: 1140px;
  }
}

特性查询嵌套

/* 检查 Grid 支持 */
.grid {
  display: flex;
  flex-wrap: wrap;
  
  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    
    & > .item {
      margin: 0;
    }
  }
}

复杂选择器嵌套

/* 相邻兄弟选择器 */
h1 {
  color: #333;
  
  + p {
    margin-top: 10px;
    color: #666;
  }
}

/* 通用兄弟选择器 */
h2 {
  color: #222;
  
  ~ p {
    font-style: italic;
  }
}

/* 属性选择器嵌套 */
input {
  border: 1px solid #ccc;
  
  &[type="text"] {
    width: 200px;
  }
  
  &[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

与 Sass/Less 嵌套的区别

相似之处

/* Sass 和 CSS 原生嵌套看起来相似 */
.card {
  .title {
    color: red;
  }
}

& 符号的必须性（重要区别！）

/* ✅ CSS 原生嵌套：必须使用 & 来连接选择器 */
.component {
  &__part {
    color: red;
  }
}

/* ❌ 这会出错（在 CSS 中） */
.component {
  __part {  /* 无效！需要 & */
    color: red;
  }
}

/* ✅ 这样可以 */
.component {
  .part {  /* 有效：空格表示后代 */
    color: red;
  }
}