Question

我对CSS比较陌生。我有一个非常简单的设置：一个包含三个子元素的主要父元素。我希望所有子元素都具有相同的填充，但是使用自己的颜色。现在，我正在做以下事情（仅作为示例）：

.parent {
  padding-top: 20px;
  background-color: white;
}

.child1 {
  background-color: gray;
}

.child2 {
  background-color: red;
}

.child3 {
  background-color: inherit;
}

为每个孩子设置背景颜色就好了，但填充保留了父母的颜色。我想知道无论如何，每个子元素都有自己的填充颜色，而不必为每个元素添加'padding-top'。

以下是HTML代码段：

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

Answer 1

如果您希望孩子们拥有自己的填充，则需要对他们应用填充...但您不必为每个元素写出来。您可以使用公共类（如.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>

如何覆盖父填充颜色？

1 个答案: