通过css设置左右孩子的样式[重复]答案

【问题标题】：styling left and right child by css [duplicate]通过css设置左右孩子的样式[重复]
【发布时间】：2019-08-14 08:27:16
【问题描述】：

下面是我想要的最终结果的示例，但是在现实生活中，<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/ 而不是中间 1 opacity:1 ，需要中间 3 个孩子 opacity:1

【问题讨论】：

@sodimel 我试过你说的链接是重复的:not(:first-child):not(:last-child) 不是我想要的结果，它会选择所有不是第一个也不是最后一个的孩子，我只需要两个active center 之间的子级要设置样式
@sodimel 请删除重复项，这是完全不同的事情
没有 css 可以对随机数量的元素执行此操作 - css 不会以这种方式与 dom 交互，您需要一个 js 解决方案（或服务器端解决方案来添加适当的类）
我认为没有 JavaScript 就无法做到这一点。
在猫头鹰轮播中，您可以为物品添加自定义类。检查stackoverflow.com/questions/28900207/…

标签： html css owl-carousel

【解决方案1】：

正如我在评论部分you cannot target the previous sibling 中所说的，仅使用 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>

【讨论】：

这不是我想要的，这将使center 孩子只有下两个孩子样式，而不是center 孩子之间
我明白了，我认为您需要为此使用脚本
您可以检查它关于检查索引并定位当前项目的下一个和上一个。我还没有清理代码，但希望你能明白。 jsfiddle.net/y2fm64nb

【解决方案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计算Item个数并动态设置宽度

【讨论】：

【解决方案3】：

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

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

【讨论】：

正如我所说的，它是生成的未知号码