Question

我有一个css类“MyParent”，它被多个子类继承。我想要“MyParent”类的一些属性，应该根据需要被子类覆盖，并且这个被覆盖不应该影响其他子类。请查看以下示例。

.MyParent {
  border-style: solid;
  border-color: red;
  background-color: yellow;
  color: red;
}
.MyChild1 .MyParent{
   background-color: blue !important;
   color: white !important;
}

.MyChild2 .MyParent{
  background-color: yellow !important;
  color: black !important;
}

我的Html如下所示。

<div class="MyParent">
 this is parent div
</div>

<div class="MyChild1">
 this is child1
</div>

<div class="MyChild2">
 this is child2
</div>

我希望MyParent div显示黄色背景颜色，字体颜色为红色，这工作正常，但其余的div不能按预期工作，但我覆盖属性。我所做的是，请找到下面的代码。

.MyChild1, .MyParent{
  background-color: blue !important;
  color: white !important;
 }

.MyChild2, .MyParent{
   background-color: green !important;
   color: white !important;
}

现在它的工作部分，但我们在类“MyChild2”中覆盖的属性正在影响父类属性。因为这个具有“MyParent”类的div由于这种继承而没有按预期进行渲染。因为在应用程序的大多数地方，输出受到干扰。如果我希望这个按预期工作，我可以再编写一个子类，我们可以这样做，每次编写子类也很烦人也一些属性如bordercolor没有得到继承 。但是为什么CSS中的这种行为，以及我们如何纠正它。任何人都可以解释一下。

提前致谢，萨兰。

Answer 1

如果CSS属性的值设置为inherit，则它们仅从父元素继承。

许多属性（例如color）都将inherit作为默认值，因此它们将继承而无需任何进一步操作。

大多数布局属性（包括边框）具有不同的默认值（通常为0），因此除非您手动将它们设置为inherit，否则它们不会从父元素继承。毕竟，如果你为一个元素添加一个边框，你不希望它内部的每个元素都有一个类似的边框...

要查看任何给定属性的默认值，请检查MDN。

Answer 2

在CSS中，你不能让规则集从其他规则集继承样式。

Inheritance只能从父母到孩子身上发生：

继承将属性值从父元素传播到其子元素。元素上属性的继承值是元素父级的属性的computed value 元件。

相反，我认为您对cascading感兴趣：

级联为{a> declared values取无序列表给定元素的给定属性，按声明对它们进行排序优先级如下所示，并输出一个cascaded value。

.MyParent, .MyChild1, .MyChild2 {
  border-style: solid;
  border-color: red;
  background-color: yellow;
  color: red;
}
.MyChild1 {
   background-color: blue;
   color: white;
}
.MyChild2 {
  background-color: yellow;
  color: black;
}

<div class="MyParent">
 this is parent div
</div>
<div class="MyChild1">
 this is child1
</div>
<div class="MyChild2">
 this is child2
</div>

CSS：继承不能像子类

2 个答案: