要按父元素覆盖子元素css属性吗

在CSS中，“child”类有自己的背景颜色，我不能更改。我想将“父”类bg颜色应用于容器。那么，是否有任何CSS技巧可以用“父”bg颜色覆盖“子”bg颜色

任何帮助都将不胜感激

<div class="parent">
    <div class="child">
</div></div>
    

---

使用

！重要信息

只有在其他方法无效时才可用。

！重要提示：将覆盖任何应用的内联背景色，请告诉我是否有效

.parent .child {
    background-color: inherit !important; // can also use "transparent"
}

---

您可以使用jQuery覆盖CSS，尽管它不美观。所以，如果你有HTML

.parent > .child {
    background-color: transparent !important;
 }

此jQuery将查找父背景色并将其应用于子背景色：

.parent {
    width: 100px;
    height: 100px;
    background: red;
}
.child {
    width: 50px;
    height: 50px;
    background: blue;
}

---

这里有一个jsfiddle:

这不是他们想要的，即使它可以工作。还有，.parent>。child@Cam对不起，我赶时间。已修复。问题是，他们希望父级背景覆盖子级背景。@Cam是的，这样做了。语句的第一部分说“在CSS中，“child”类有自己的bg颜色，我不能更改。“子类在父类之上。”。我的想法是，删除子类背景，除非你不能。你能改变什么？他们不是在谈论内联背景颜色，他们说：“'child'类有自己的背景颜色”

background color:transparent

。在我看来，用户似乎在寻求一种方法，根据父类的颜色改变子类的背景颜色，而不需要控制CSS。JS可以做到这一点，尽管正如我在第一句中所提到的，它肯定不是理想的。您可以使用

继承

CSS值，或者

透明

，如果没有其他功能的话。使用外部库有什么好处？在普通js中：

this.style.backgroundColor=this.parentNode.style.backgroundColor

ok，但人们可能根本没有点击事件，不是吗？其他解决方案更简单，一般来说，如果可以在css中完成某些事情，我们应该使用javascript来代替。因为JS中的多行逻辑可以在css中的一行中完成，编写更多的代码可能会导致更多的bug。有了css3，我们可以用更少的时间做很多事情。只是一个想法。

.parent {
    width: 100px;
    height: 100px;
    background: red;
}
.child {
    width: 50px;
    height: 50px;
    background: blue;
}

$('.child').on('click',  function(event) {
    var bg = $(this).parent().css("background-color"); // finds background color of parent
    $(this).css("background-color", bg);  //  applies background color to child
});