如何选择具有相同类的连续元素？

Question

问题：

我想选中所有相邻的红色框，并将其背景颜色更改为黄色。但应用的css不起作用。

期望结果：

第二个红色框应变成黄色。

尝试过的方法：

我尝试使用+运算符选择相邻的元素，但它并没有给我期望的结果。

这是我用来选择相邻的1级元素的精确代码：

ul li > div.red + ul li > div.red {
  background: yellow;
}

我的代码：

这是代码沙盒：https://codesandbox.io/s/divine-wave-1bjmp?file=/main.css

（翻译结果已按照格式要求返回，如有其他需要请告知）

ul {
  list-style-type: none;
}

ul li>div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 20px;
}

ul li>div.red {
  background: red;
}

ul li>div.green {
  background: green;
}

ul li>div.red+ul li>div.red {
  background: yellow;
}

<ul>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="green" />
  </li>
  <li>
    <div class="red" />
  </li>
</ul>

注意：

我不允许对HTML进行任何更改。这个问题应该使用纯CSS来解决。

- Vishal

---

你不能这样做，因为div.red不是兄弟元素。你可以在li上加上相同的类吗？ - Hoch

@Hoch 我没有权限更改HTML，因为它是由第三方库生成的。 - Vishal

Answer 1

实际上，使用纯 CSS 是不可能解决这个问题的。事实上，有一个 CSS 关系伪类可以帮助解决： :has()。使用它，你可以应用以下选择器：

ul li:has(div.red) + li > div.red

然而，如你在Can I use website所见，:has()伪类在任何浏览器中都不被支持。因此，唯一的解决方案是修改HTML结构或使用JavaScript代码。

- user11229156

Answer 2

您可以通过其父级选择 target （如果在您的原始代码中可行），然后可以执行以下操作：

ul li:nth-of-type(2) > div.red {
  background: yellow;
}

代码：

ul {
  list-style-type: none;
}

ul li>div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 20px;
}

ul li>div.red {
  background: red;
}

ul li>div.green {
  background: green;
}

ul li:nth-of-type(2) > div.red {
  background: yellow;
}

<ul>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="green" />
  </li>
  <li>
    <div class="red" />
  </li>
</ul>

---

如果您可以使用JavaScript，这里是代码：

• 获取所有red元素
• 设置target（受影响的red数量）
• 检查所有red元素，如果target匹配，则应用CSS。

如果颜色在某个时刻会改变，您也可以声明一个新变量来存储颜色。例如：

var bgColor = 'yellow';
reds[i].style.background = bgColor;

代码：

var reds = document.querySelectorAll('.red');
var target = 2;

for (var i = 0; i < reds.length; i++) {
  if (reds[i] == reds[target-1]){
    reds[i].style.background = 'yellow';
  }
}

ul {
  list-style-type: none;
}

ul li>div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 20px;
}

ul li>div.red {
  background: red;
}

ul li>div.green {
  background: green;
}

<ul>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="red" />
  </li>
  <li>
    <div class="green" />
  </li>
  <li>
    <div class="red" />
  </li>
</ul>

- 001

---

谢谢你尝试回答，但请阅读问题中的注释部分。我只能使用CSS，不能使用其他任何东西。 - Vishal

抱歉，没有注意到...请现在检查一下可能的方法。 - 001

抱歉，我之前没有提到，但是我想说的是元素的数量可能不总是相同的，所以可能会有3个或4个或任意数量的连续红色元素，或者任意数量的连续绿色元素。 - Vishal