Question

我帮助朋友编辑在线个人资料。我们可以完全访问并编辑css，但访问和限制编辑配置文件的html。

我们可以将子div添加到配置文件中并将它们设置得很好，但是父css样式就在它们周围（就像它通常是/应该的那样）。有没有办法在孩子们之前或之前停止父级背景样式，同时仍然保持样式的动态性质（即不使用背景图像）

这是我们到目前为止所拥有的https://jsfiddle.net/Lfccdjk6/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中创建自己的父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;
}

在孩子面前停止父母背景？可以用css完成吗？

2 个答案: