CSS：继承不能在子类中执行

我有一个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>

现在它部分工作，但是我们在类“MyChild2”中重写的属性正在影响父类属性。因此，具有类“MyParent”的div由于此继承而无法按预期获得渲染。因此，在应用程序的大多数位置，输出受到干扰。如果我想让它像预期的那样工作，我可以再写一个子类，我们可以做到，而且每次都写子类也很烦人，而且一些属性（如bordercolor）没有得到继承。但是为什么CSS中会出现这种行为，我们如何纠正它呢。有人能给我解释一下吗

提前感谢,，

---

Saran。

CSS属性只有在其值设置为

inherit

时才从父元素继承

许多属性（如

color

）的默认值为

inherit

，因此它们将继承，而无需执行任何进一步的操作

大多数布局特性（包括边框）具有不同的默认值（通常为

0

），因此除非手动将它们设置为

inherit

，否则它们不会从父元素继承。毕竟，如果你给一个元素添加了一个边框，你不希望它里面的每个元素都有一个相似的边框

---

要查看任何给定属性的默认值是什么，请选中MDN。

在CSS中，不能让规则集继承其他属性的样式

只能发生在父母和孩子之间：

继承将属性值从父元素传播到其子元素。元素上属性的继承值为 元素父级上属性的名称 元素

相反，我认为您感兴趣的是：

级联为一个 给定元素上的给定属性，按其声明的 优先级如下所示，并输出单个

.MyParent、.MyChild1、.MyChild2{
边框样式：实心；
边框颜色：红色；
背景颜色：黄色；
颜色：红色；
}
.我的孩子1{
背景颜色：蓝色；
颜色：白色；
}
.我的孩子2{
背景颜色：黄色；
颜色：黑色；
}

这是家长课
这是child1
这是child2

这并不完全正确。有些属性是继承的，有些则不是。继承值的初始值不是

inherit

，而是在级联未产生值时继承。继承和非继承都可以通过

inherit

强制继承。看见

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

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