子供の前に親の背景を止める??それはCSSで行うことができますか？

Question

友人がオンラインプロフィールを編集するのを手助けしています。 私たちは完全なアクセス権を持ち、cssを編集できますが、プロファイルのHTMLへのアクセスは限られており、編集は制限されています。

子divをプロファイルに追加してスタイルを細かく設定できますが、親CSSスタイルはその周りにあります（普通はそうでなければなりません）。 スタイリングのダイナミックな性質を維持しながら（つまり、背景画像を使用しないで）子供の前または前に親の背景スタイリングを停止する方法はありますか？https://jsfiddle.net/Lfccdjk6/2/ ...あなたのようにそれぞれの背景を持っている親とその2人の子供を見ることができ、私たちが/いたことはやることを望んでいるすべての3つのdivが互いに

私のHTMLとは独立して表示されるように、その子の前に親の背景を停止している：

<div class="heading"> 
Interests &amp; Hobbies 
</div> 

<div class="container" id="meaning_life_container"> 
<span class="label" id="meaning_life_label"> 
Meaning of Life: 
</span> 
<span class="value" id="meaning_life_value"> 
blah blah    </span> 
</div> 

<div class="container" id="favorite_books_container"> 
<span class="label" id="favorite_books_label"> 
Favorite Books: 
</span> 

<span class="value" id="favorite_books_value"> 
blah blah,blah blah and blah blah    </span> 
</div> 
<div class="container" id="hobbies_container"> 
<span class="label" id="hobbies_label"> 
Hobbies: 
</span> 

<span class="value" id="hobbies_value"> 
camping     </span> 
</div> 

<div class="container" id="know_me_container"> 
<span class="label" id="know_me_label"> 
Best Reason to Get to Know Me: 
</span> 

<span class="value" id="know_me_value"> 


<!----------------------------------> 
<!-- CAN EDIT ANYTHING BELOW HERE --> 
<!----------------------------------> 

<div class="usercontent"> 
<div id="test"> 
<div class="heading"> test 1</div> 

<div> 
info 
</div> 

random content 
</div></div> 
<div class="usercontent"> 
<div id="test2"> 
<div class="heading">test 2</div> 

<div> 
some random content 
</div>blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah   

</div></div></span> 

</div></div></div></div></body>' 

私のCSS：

body { background-color:pink;} 

#profile_interests_content { 
background: rgba(255,255,255,0.35); 
border-radius: 7px; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
-o-border-radius: 7px; 
border: 1px solid rgb(0,0,0); 
box-shadow: 0 0 10px #000; 
display: table; 
padding: 25px 25px 0; 
width: auto; 
margin: 0 80px; 
} 
.container { 
display: block; 
margin: 0; 
height: 100%; 
} 
#profile_interests_content .label, #profile_interests_content .value { 
display: block; 
margin: 3px 0; 
} 
#profile_interests_content .value { 
margin-left: 12px; 
} 
.label { 
text-align: left; 
min-width: 175px; 
font-weight: bold; 
} 
#profile_interests_content #know_me_container #know_me_label { 
display: none; 
} 
#test { 
background: rgba(255,255,255,0.35); 
border-radius: 7px; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
-o-border-radius: 7px; 
border: 1px solid rgb(0,0,0); 
box-shadow: 0 0 10px #000; 
text-align: center; 
padding: 25px; 
width: auto; 
margin: 20px -31px; 
left: -6px; 
position: relative; 
} 
.usercontent div { 
padding: 20px; 
} 
#test2 { 
background: rgba(255,255,255,0.35); 
border-radius: 7px; 
-webkit-border-radius: 7px; 
-moz-border-radius: 7px; 
-o-border-radius: 7px; 
border: 1px solid rgb(0,0,0); 
box-shadow: 0 0 10px #000; 
text-align: center; 
padding: 25px; 
width: auto; 
margin: 20px -31px; 
left: -6px; 
position: relative; 
} 

イム完全なスタックと私は私がidは、誰かが何かアドバイスを持っているか、別の方向に私を指すことができるかどうかを確認するために尋ねると思ったプロファイル全体を再設計する前に

歓声

Answer 1

はい、親のdivをターゲットにして背景のプロパティを上書きするCSSセレクタを使用することもできますし、メインのペアの内部に独自の親divを作成することもできますnt div。

<main div> 
    <your sub parent div with your overwriting styles> 
    <child div> 
    </child div> 
    <your sub parent div> 
</main div> 

Answer 2

これを試してみてください。これは悪い習慣ですが、あなたがそれをひどく必要とするので、あなたはそれを使うことができます。この読み：

https://css-tricks.com/when-using-important-is-the-right-choice/

body{ 
    background-color: transparent !important; 
}