CSS嵌套选择器未继承样式

uqdfh47h 于 2023-01-06 发布在其他

关注(0)|答案(1)|浏览(165)

我有以下嵌套样式：

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

    &-transparent {
      background: transparent;
    }
  }
}

据我所知，任何出现在内部嵌套选择器之前的样式都应该应用于该选择器。但显然它不是这样工作的。期望的结果是类为option-card-transparent的任何元素都应该具有属性border-radius: 0.7rem和box-shadow: none。这可能吗？或者我应该使用@extend？
我试着把这些属性移到外面，就像下面这样，它确实适用于所有嵌套的选择器。这是因为它出现在嵌套类名之外吗？

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

    &-transparent {
      background: transparent;
    }
  }
}

css

来源：https://stackoverflow.com/questions/75018549/css-nested-selector-not-inheriting-styling

1条答案

按热度按时间

50few1ms1#

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

.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）回复(0）举报 2023-01-06

我来回答

CSS嵌套选择器未继承样式

1条答案

相关问题

热门标签

最新问答