Angular中如何在CSS里嵌套div标签及其error类？

在CSS中实现这种嵌套写法，分两种常见场景：

1. 使用原生CSS嵌套（现代浏览器/Angular支持） #

现在主流浏览器和Angular都支持原生CSS嵌套语法，你可以直接用&指代父选择器（这里就是div），写法如下：

div {
  /* 这里写div的基础样式，所有该组件内的div都会继承 */
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;

  &.error {
    /* 带error类的div会继承上面的基础样式，再加上这里的专属样式 */
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
  }
}

这里的&.error等价于div.error，既选中了带error类的div，又让error类的样式自动包含div的基础属性。

2. 使用预处理器（Sass/Less） #

如果你的Angular项目配置了Sass或Less预处理器，写法和原生嵌套几乎一致：

// Sass示例
div {
  padding: 8px;
  border-radius: 4px;

  &.error {
    background-color: #ffebee;
    color: #c62828;
  }
}

预处理器会把这段代码编译成div { ... } div.error { ... }的标准CSS，效果和原生嵌套一样。

注意 #

Angular组件样式默认是组件封装的，所以这些样式只会作用于当前组件内的<div [class]="{error: condition}">元素，不会污染全局样式。

内容的提问来源于stack exchange，提问作者Kalyan Kumar