通过 CSS 设置左右子项的样式

Question

下面是一个我想要的最终结果的示例，但是在现实生活中，<div class="item"></div>生成的是未知数字，因此:nth-child(3)和:nth-child(5)这种硬编码样式是不可能的。active center类将永远处于中心位置。那么，有没有css方法可以在<div class="item active center"></div>之间为孩子设置样式

body{
margin:0;
background-color:#333;
}
.container{
display:flex;
align-items:center;
}
.item{
height:50px;
width:50px;
background-color:#fff;
margin:10px;
opacity:0.2;
}
.item.active.center{
opacity:1;
}
.item.active:nth-child(3){
opacity:1;
}
.item.active:nth-child(5){
opacity:1;
}

<div class="container">
<div class="item"> </div>
<div class="item active"> </div>
<div class="item active"> </div>
<div class="item active center"> </div>
<div class="item active"> </div>
<div class="item active"> </div>
<div class="item"> </div>
</div>

像这个例子 http://jsfiddle.net/4a5uhm6x/代替中间 1opacity:1，需要中间 3 个子opacity:1

Answer 1

正如我在评论部分所说，你不能仅仅使用 CSS 来定位元素的前一个兄弟。我建议您定位"3rd"元素并使用"+"选择器来定位"4"和"5"，如下所示

body {
margin:0;
background-color:#333;
}
.container{
display:flex;
align-items:center;
}
.item{
height:50px;
width:50px;
background-color:#fff;
margin:10px;
opacity:0.2;
}
.item.active.center{
opacity:1;
}
.item.active.center + .item,
.item.active.center + .item + .item {
opacity: 1;
}

<div class="container">
<div class="item"> </div>
<div class="item active"> </div>
<div class="item active center"> </div>
<div class="item active"> </div>
<div class="item active"> </div>
<div class="item active"> </div>
<div class="item"> </div>
</div>

Answer 2

项目宽度可以这样设置。

/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}

或使用JS计算项数并动态设置宽度

Answer 3

.item{
height:50px;
width:50px;
background-color:#fff;
margin:10px;
opacity:0.2;
}

尝试以%为单位设置宽度，使其覆盖整个宽度。 如果有 7 项目必须使用宽度 ： 14%