通过在css中调用类来更改父级中的子级的字体颜色和高度
通过在css中调用类来更改父级中的子级的字体颜色和高度
提问于 2018-08-11 23:40:06
我是个新手。我有这段代码，但问题是我不知道如何更改容器中每个孩子的段落颜色。当我改变第二个孩子的身高时。第一个和第二个孩子都改变了高度，但我只想让孩子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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-12 00:12:03
您的每个段落都有一个类或id，所以您可以使用它来分别针对每个段落。
例如：
.div-container .p2 {
color: tomato;
}另外，flex容器的默认对齐项目属性是stretch，这就是两个元素共享相同高度的原因。例如，您可以通过将其设置为flex-start来禁用它。
.div-container {
display: flex;
align-items: flex-start;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51801267
复制相关文章
相似问题