CSS 嵌套选择器不继承样式

CSS nested selector not inheriting styling

提问人：ela16 提问时间：1/5/2023 更新时间：1/5/2023 访问量：59

问：

我有以下嵌套样式：

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

    &-transparent {
      background: transparent;
    }
  }
}

据我了解，内部嵌套选择器之前的任何样式都应应用于该选择器。但显然它不是那样工作的。期望的结果是，任何具有该类的元素都应具有 和 的属性。这可能吗？还是我应该使用@extend？option-card-transparentborder-radius: 0.7rembox-shadow: none

我试图将这些属性移到外面，如下所示，它确实适用于所有嵌套选择器。这是因为它不在嵌套的类名中吗？

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

    &-transparent {
      background: transparent;
    }
  }
}
html css sass 嵌套

评论

0赞 Adam 1/5/2023
只需将其触发到 SASS 到 CSS 转换器并读取输出 jsonformatter.org/sass-to-css
0赞 A Haworth 1/5/2023
有些 CSS 属性是继承的，有些则不是。例如，border-radius 默认不被继承。你可以在 MDN 站点上查看该属性是否被继承。您可以使用浏览器的开发工具检查工具来准确查看 SASS 生成了哪些 CSS。

答：

0赞 Syed Khizaruddin 1/5/2023 #1

据我所知，您期望的是父级的属性继承给子级，但事实并非如此，因为使用意味着您正在创建一个新类，而不是该特定类的子级&-

例如

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

这将创建

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

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

您需要指定要从父类继承的属性

例如，

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

评论

0赞 A Haworth 1/5/2023
我不认为你对创建的CSS的渲染是正确的。
0赞 Syed Khizaruddin 1/5/2023
哪一部分不太对劲？那是 scss 转换为 css，我忘了提到它@AHaworth
0赞 A Haworth 1/5/2023
我想你已经失去了筑巢。
0赞 Syed Khizaruddin 1/5/2023
哦，是的！没错，我刚刚给他举了个例子，和他提到的代码不一样。

上一个：将分层字典转换为 HTML 嵌套下拉列表

下一个：如何一次重绘所有子表 / 嵌套表