html - 如何在css中将孩子应用到之前
问题描述
我之前指定了四个块,为了使用之前更改中心块的半径,问题是我所有的块都是紫色的,我需要为所有块应用不同的颜色,例如蓝色,黄色,红色,绿色,我想这个例子需要使用孩子,但我不太明白如何实现它
.EnjoyGirlsContainer {
text-align: center;
}
.EnjoyGirlsList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.EnjoyGirlsList div img {
width: 240px;
height: 304px;
max-width: 100%;
margin: 20px 5px 5px 5px;
margin-right: 0;
margin-left: 0;
}
.EnjoyCardContainer {
position: relative;
margin: 7px;
margin-right: 0;
margin-left: 0;
}
.EnjoyCardChildContainer {
position: absolute;
width: 100%;
bottom: 5px;
background: purple;
}
.EnjoyCardChildContainer:after {
content: '';
position: absolute;
left: 0;
width: 100%;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
box-sizing: border-box;
border-top: 8px solid purple;
}
.EnjoyCardChildContainer:first-child:before {
border-top: 8px solid red;
}
.EnjoyCard {
margin-right: 10px;
margin-left: 10px;
}
.EnjoyCardChildContainer h3 {
font-size: 30px;
}
<div class="EnjoyGirlsList">
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
<div class="EnjoyCard">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/A-Team-Logo.svg/1200px-A-Team-Logo.svg.png" alt="">
</div>
<div class="EnjoyCardContainer">
<div class="EnjoyCardChildContainer">
<h3>Hello World</h3>
</div>
</div>
</div>
</div>
解决方案
.EnjoyCard:nth-child(1) .EnjoyCardChildContainer:after {
filter: drop-shadow(0 1px 4px rgba(223, 8, 8, 0.967));
border-top: 8px solid yellow;
}
推荐阅读
- unit-testing - Truffle uint 测试脚本不反映更新的存储变量和奇怪的行为
- android - 计算TextView中可见字符数
- angular - 使用不记名令牌和 net::ERR_CERT_AUTHORITY_INVALID 错误的远程 API 调用
- sql - 如何计算雅典娜(Presto)中2个时间戳之间的差距?
- asp.net - 使用 SelectPDF 导出 JQGrid,链接的 JQGrid 中没有数据
- sql - 需要将这两者之间的差异作为输出
- database - 为什么最后一份工作在 DolphinDB 中不起作用
- doctrine-orm - 从查询中返回奇怪字段名称的学说
- angular - 如何从 get 函数中显示用户项目?
- ios - 我想要导航栏中后退按钮的自定义图像,但有 2 个后退按钮