Question

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

在CSS中，“child”类有自己的bg颜色，我无法改变。我想将“父”类bg颜色应用于容器。那么，是否有任何CSS技巧可以通过“父”bg颜色覆盖“child”bg颜色。

非常感谢任何帮助。

由于

Answer 1

！important将覆盖所应用的任何内联背景颜色，请告诉我这是否有效

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

Answer 2

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

仅在没有其他工作的情况下使用!important。

Answer 3

你可以使用jQuery覆盖CSS，虽然它不够优雅。所以，如果你有HTML

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

和CSS：

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

这个jQuery会找到父背景颜色并将其应用于孩子：

$('.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
});

这是一个jsfiddle：link

想要通过父元素覆盖子元素css属性

3 个答案: