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

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解决。

Answer 1

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

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

但是，任何浏览器都不支持 :has() 伪类，正如您在 Can I use website 中看到的那样。因此，唯一的解决方案是修改 HTML 结构或使用 JavaScript 代码。

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>