親パディングカラーをオーバーライドする方法は？

私は比較的新しいCSSです。私は非常に簡単なセットアップを持っています：3つの子要素を持つメインの親要素。私はすべての子要素が同じパディングを持っているが、自分の色でしたい。今、私は（単なる例として）次のことをやっている：親パディングカラーをオーバーライドする方法は？

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

 
.child1 { 
 
    background-color: gray; 
 
} 
 

 
.child2 { 
 
    background-color: red; 
 
} 
 

 
.child3 { 
 
    background-color: inherit; 
 
}

背景色はちゃんとそれぞれの子供のために設定されますが、詰め物は、親の色を保持しています。とにかく子要素のそれぞれに「パディングトップ」を追加することなく、それぞれ独自のパディングカラーを持つことができるかどうか疑問に思っていました。あなたは子供たちが自分のパディングを持っているしたい場合は、それらすべてにパディングを適用する必要があります

<!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

...しかし、あなたドン：ここ

は、HTMLスニペットです各要素ごとに書き出す必要があります。共通のクラス（.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素晴らしい、歓迎です:) –

親パディングカラーをオーバーライドする方法は？

答えて

関連する問題