<分区>
标签 html css owl-carousel
<分区>
下面是我希望最终结果如何的示例，但是在现实生活中，<div class="item"></div>生成未知数，所以 :nth-child(3)和 :nth-child(5)这种硬编码风格是不可能的。 active center类(class)将永远在中心 child 。那么，是否有任何 css 方式可以为 <div class="item active center"></div> 之间的 child 设置样式？
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/
而不是中间 1 opacity:1 , 需要 3 个 child 中间 opacity:1
最佳答案
我在评论区说了you cannot target the previous sibling仅使用 CSS 的元素。我建议您定位“第三”元素并使用“+”选择器定位“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>关于html - 通过 css 设置左右 child 的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57490919/