如何阻止子 div 继承某些父 div 属性？答案

【问题标题】：How to stop a child div inheriting some of a parents divs attributes?如何阻止子 div 继承某些父 div 属性？
【发布时间】：2015-06-03 15:34:50
【问题描述】：

我创建了一个 div，上面有一张图片：

.middleBlockDiv{
    content:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

我有一个孩子 div：

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}

如果我不将图像放入父 div，那么父 div 的 css 就像这样：

.middleBlockDiv{
        display: inline-block;
        background-color: rgba(70,130,180,1);
        float: left;
        z-index:2;
        opacity: 0.8;
        border: 4px solid white;
        border-radius: 30px 15px;
        clear:both;
    }

显示子 div，但是，如果我保留图像，则不会显示子 div。它在 DOM 中，但未显示在屏幕上。

我认为这可能是因为继承，因为子 div 可能正在继承图像。

如何阻止子 div 从父级继承图像？

小提琴：http://jsfiddle.net/8xyk2ucb/

【问题讨论】：

您能否将您的 HTML 添加到问题中，或者最好还是一个有效的jsfiddle.net。我想这不是继承问题，而是由于您要添加的content:。
希望这篇文章对您有所帮助。 [由马克维尔发布][1] [1]：stackoverflow.com/questions/5080365/…
为什么要使用content属性将图片插入到dom中？你为什么不把它用作背景图片呢？
我不认为你能做到这一点，现在应该试一试，谢谢@HaukurHaf
效果很好，谢谢@HaukurHaf。如果您想将其作为答案，我很乐意接受它:)

标签： javascript jquery html css inheritance

【解决方案1】：

正如用户@HaukurHaf 向我提到的使用背景图像而不是内容，这帮助我解决了我的问题。

所以我的代码看起来像这样：

.middleBlockDiv{
    background-image:url("./images/blockhead.png");
    display: inline-block;
    background-color: rgba(70,130,180,1);
    float: left;
    z-index:2;
    opacity: 0.8;
    border: 4px solid white;
    border-radius: 30px 15px;
    clear:both;
}

.coinDiv{
    display: inline-block;
    background-color: gold;
    float: left;
    z-index:2;
    border: 4px solid white;
    border-radius: 50px;
    clear:both;
}

【讨论】：

【解决方案2】：

默认情况下继承 CSS 规则 - 因此是“级联”名称。要得到你想要的，你需要使用 !important:

示例：

middleBlockDiv
{
  ....;
}
coinDiv
{
  // any rule you want here, followed by !important
}

【讨论】：