是否有“反向一般兄弟姐妹”的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 ascading S tyle S heet，并且它从上到下进行解释。因此适用其规则。

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

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