CSS 嵌套

原生已支持 CSS 嵌套：

规则

它和 CSS 处理器中的嵌套基本相似，唯一不同的是，CSS 的嵌套，它必须以&、.（类名）、#（ID）、@（@规则）、:、::、*、+、~、>或[符号开头。

.parent {
  .child {
    /* css code */
  }
}
/* 等价于 */
.parent .child {
  
}

可以通过 & （嵌套选择器）代表父规则中引用选择器

ul {
  padding: 1em;
}
.component ul {
  padding: 0;
}

/* 可以通过以下方式书写 */
ul {
  padding: 1em;
  
  .component & {
    padding: 0;
  }
}

以下代码是无效的，因为不满足上面的规则

.component {
  /* 不满足规则 */
  ul {
    
  }
}

需要如下这样修改才满足，因为有 & 开头

.component {
  & ul {
    
  }
}

在 css 处理器中，如下是生效的

.box {
  &__title {
    
  }
}

但在 CSS 原生嵌套中不生效，会等同于

__title.card {}