如何覆盖父级填充颜色？

我对CSS比较陌生。我有一个非常简单的设置：一个包含三个子元素的主父元素。我希望所有的子元素都具有相同的填充，但使用它们自己的颜色。现在，我做以下（只是为例）：如何覆盖父级填充颜色？

.parent { 
 
    padding-top: 20px; 
 
    background-color: white; 
 
} 
 

 
.child1 { 
 
    background-color: gray; 
 
} 
 

 
.child2 { 
 
    background-color: red; 
 
} 
 

 
.child3 { 
 
    background-color: inherit; 
 
}

的背景色设置为每个孩子就好了，但是填充保持母体的颜色。我想知道是否有子元素，每个元素都有自己的填充颜色，而不必为每个元素添加“填充顶”。

下面是HTML片段：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Amazing</title> 
 
     <link rel="stylesheet" href="css/main.css"> 
 
    </head> 
 
    <body> 
 
    \t <div class="parent"> 
 
\t  \t <div class="child1"> 
 
\t  \t \t <h1> Child1 </h1> 
 
\t  \t </div> 
 
\t  \t <div class="child2"> 
 
\t  \t \t <h1> Child2 </h1> 
 
\t  \t </div> 
 
\t  \t <div class="child3"> 
 
\t  \t \t <h1> Child3 </h1> 
 
\t  \t </div> 
 
    \t </div> 
 
    </body> 
 
</html>

来源

2017-06-15 kubik42

你可以发布你的HTML的相关部分？ –

如果你想让孩子有填充，那么你需要给孩子填充。 – CBroe

如果你想孩子有自己的填充，你需要应用填充到他们... ...但你不不必为每个元素写出来。您可以使用普通类（如.child）或.parent > *选择器将样式分组，以选择.parent的所有直接子项。我使用.parent-all这个类来演示这个演示，只是为了区分这两个组显示这两种方法。

.parent { 
 
    background-color: white; 
 
} 
 

 
.child1 { 
 
    background-color: gray; 
 
} 
 

 
.child2 { 
 
    background-color: red; 
 
} 
 

 
.child3 { 
 
    background-color: inherit; 
 
} 
 

 
.parent-all > * { 
 
    padding-top: 20px; 
 
} 
 

 
.parent .child { 
 
    padding-top: 20px; 
 
}

<div class="parent parent-all"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2">child2</div> 
 
    <div class="child3">child3</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child child1">child1</div> 
 
    <div class="child child2">child2</div> 
 
    <div class="child child3">child3</div> 
 
</div>

来源

2017-06-15 15:03:54

这就是我一直在寻找的，谢谢！ – kubik42

@ D.Kubik真棒，不客气:) –

如何覆盖父级填充颜色？

回答

相关问题