通过在CSS中调用类来更改父级中子级的字体颜色和高度

Question

我是新手。我有此代码，但问题是我不知道如何更改容器中每个孩子的段落颜色。以及当我更改第二个孩子的身高时。第一个和第二个孩子都改变身高，但我只希望孩子2改变身高。请帮忙谢谢你。

<div class="container">
  <div class="c">d</div>
</div>

.div-container {
  max-width: 1400px;
  margin: 40px auto 0px auto;
  display: flex;
  justify-content: space-around;
}
.container{
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 20px;
  flex-basis: 30%;
}
.container:nth-child(1) {
  background-color: #000;
  border-radius: 10%;
}
.container:nth-child(2) {
  background-color: #cdf1c3;
  border-radius: 10%;
}

Answer 1

每个段落都有一个类或ID，因此您可以使用该类或ID分别定位每个段落。

例如：

.div-container .p2 {
    color: tomato;
}

此外，flex容器的默认align-items属性为Stretch，这就是两个元素共享相同高度的原因。您可以通过将其设置为例如flex-start来禁用它。

.div-container {
    display: flex;
    align-items: flex-start;
}