如何覆蓋父級填充顏色？

我對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真棒，不客氣:) –

如何覆蓋父級填充顏色？

回答

相關問題