时间戳

首页 > 解决方案 > 通过调用css中的类来更改父级中子级的字体颜色和高度

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

问题描述

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

.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%;
}
<title id="page-title"></title>	

<div class="div-container">
  <div class="container">
    <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed euismod nisi porta lorem mollis aliquam. Aliquam faucibus purus in massa tempor. Enim neque volutpat ac tincidunt. At quis risus sed vulputate odio ut enim blandit volutpat.</p>


  </div>
  <div class="div-container">
    <h2 class="h2">Sample</h2>
    <p class="p2">P2</p>
    <p class="p3">p3</p>
    <p id="p4"></p>
  </div>
</div>

标签： htmlcssflexbox

解决方案

您的每个段落都有一个类或 id，因此您可以使用它来分别定位每个段落。

例如：

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

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

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

推荐阅读