CSS嵌套选择器样式未继承，如何让option-card-transparent继承样式？

为什么第一种写法不生效？ #

先看你第一种SCSS代码编译后的普通CSS：

ion-card.option-card {
  border-radius: 0.7rem;
  box-shadow: none;
}
ion-card.option-card-transparent {
  background: transparent;
}

这里ion-card.option-card和ion-card.option-card-transparent是两个独立的选择器，border-radius、box-shadow属于非继承属性，不会自动传递给其他选择器匹配的元素。所以带option-card-transparent类的元素只会拿到background: transparent，不会有外层的圆角和阴影样式。

实现需求的可行方案（不需要用@extend） #

要让option-card-transparent类的元素拥有那两个样式，有两种常用写法：

方案1：让元素同时拥有两个类 #

如果你的元素是<ion-card class="option-card option-card-transparent"></ion-card>，可以这样嵌套：

ion-card {
  &.option-card {
    border-radius: 0.7rem;
    box-shadow: none;

    &.option-card-transparent {
      background: transparent;
    }
  }
}

编译后会生成：

ion-card.option-card {
  border-radius: 0.7rem;
  box-shadow: none;
}
ion-card.option-card.option-card-transparent {
  background: transparent;
}

这样元素同时匹配两个选择器，就能拿到所有样式。

方案2：共享公共样式 #

如果元素只带option-card-transparent类，直接把公共样式抽出来同时应用到两个选择器：

ion-card {
  &.option-card,
  &.option-card-transparent {
    border-radius: 0.7rem;
    box-shadow: none;
  }

  &.option-card-transparent {
    background: transparent;
  }
}

编译后两个选择器都会包含圆角和阴影样式，后者额外加透明背景。

第二种写法生效的原因 #

你把border-radius和box-shadow写在ion-card根节点下，编译后的CSS是：

ion-card {
  border-radius: 0.7rem;
  box-shadow: none;
}
ion-card.option-card {
}
ion-card.option-card-transparent {
  background: transparent;
}

这里所有ion-card元素都会匹配第一个选择器，自然包含那两个样式——不管它有没有额外的option-card或option-card-transparent类，不是因为“嵌套类名之外”，而是因为根选择器ion-card直接覆盖了所有该标签的元素。

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