我正在尝试为连续具有相同 css 类的 div 使用不同的 css 样式,而为同一类的单个 div 使用不同的样式。
如果解释令人困惑,这就是我要实现的目标。
.row {
display: flex;
margin: 20px;
}
.number {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.number.bg {
background-color: #e24381;
color: #ffffff;
border-radius: 24px 0 0 24px;
}
.number.bg ~ .number.bg {
border-radius: 0 24px 24px 0;
}
<div class="row">
<div class="number">1</div>
<div class="number bg">2</div>
<div class="number bg">3</div>
<div class="number bg">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number bg">7</div>
</div>
这应该是输出:
它可以仅通过 CSS 完成还是还需要 JavaScript?
最佳答案
对于 vanilla CSS 解决方案,您可以使用伪元素为您完成此操作:
为
bg
元素设置border-radius: 25px
,使用 绝对 定位并堆叠在
后面的伪元素 填充连续
元素,并使用负边距移位。bg
元素中的边框间隙bg
请看下面的演示:
.row {
display: flex;
margin: 20px;
}
.number {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
}
.number.bg {
background-color: #e24381;
color: #ffffff;
border-radius: 25px;
position: relative;
}
.number.bg+.bg:before {
content: '';
display: block;
background-color: #e24381;
margin-left: -50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
<div class="row">
<div class="number">1</div>
<div class="number bg">2</div>
<div class="number bg">3</div>
<div class="number bg">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number bg">7</div>
</div>
关于javascript - 连续 CSS 类的不同样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55709889/