是否有“反向一般兄弟姐妹”CSS 选择器？

Question

假设我有以下内容

.selected {
  font-weight: bold;
}
.selected ~ div {
  color: red;
}

<div class="numbers">
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div class="selected"><p>3</p></div>
  <div><p>4</p></div>
  <div><p>5</p></div>
</div>

在这 5 个 div 中，所选 div 的位置可能会发生变化（即用户单击某些内容，现在选择了 2 个而不是 3 个），因此我需要这些奇特的 CSS 规则。

我可以选择所选元素之后的 div。如何选择前面的 div？

我尝试过类似的方法.numbers div:not(.selected ~ div){}，但这似乎不起作用。

Answer 1

你不能。

CSS 代表C级联样式表，它是从上到下解释的。它的规则也是如此。

您不能使用 CSS 更改所选元素之前的任何内容。不是父母，也不是以前的兄弟姐妹。

您需要使用 JavaScript 来实现该功能。