如何阻止繼承某些父母div屬性的子div？

我創建了上有一個像一個div：如何阻止繼承某些父母div屬性的子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中的的CSS父div是這樣的：

.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？

FIDDLE：http://jsfiddle.net/8xyk2ucb/

來源

2015-06-03 thatOneGuy

你能你的HTML代碼添加到這個問題，或更好的工作http://jsfiddle.net。我會想象這不是一個繼承問題，而是由於你添加的「內容：」。 –

希望這個poste可以幫助你。 [posted by makville] [1] [1]：http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles – TinyOS

爲什麼插入使用內容屬性將圖像轉換成dom？你爲什麼不把它用作背景圖片？ – HaukurHaf

至於@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; 
}

來源

2015-06-03 16:20:51 thatOneGuy

-2

CSS規則默認情況下繼承 - 因此「級聯」的名字。爲了讓你需要用你想要什麼重要的！

例如：

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

來源

2015-06-03 15:47:39 TinyOS

也許編輯我的小提琴會幫助..... – thatOneGuy

如何阻止繼承某些父母div屬性的子div？

回答

相關問題