/*向所有子级添加样式，然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色：红色；}ul＞li目标，ul>li.target~li{颜色：继承；}＜ul＞<li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>

我找到了一种方法来设计所有以前的兄弟姐妹（与~相反），这取决于你需要什么。

假设你有一个链接列表，当你悬停在一个链接上时，之前的所有链接都应该变成红色。你可以这样做：

/*默认链接颜色为蓝色*/.父级a{颜色：蓝色；}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色：红色；}.父项a：悬停，.父a:悬停~a{颜色：蓝色；}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>

我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望这对某人有所帮助。

对于我的用例，需要更改焦点上的先前元素样式，并且悬停在父元素中只有两个项。为此，使用了：focuswithin和：hover伪类。

无论何时发生聚焦/悬停事件，都可以选择

.root元素：悬停.element到样式｛background color:red；｝.root元素：将焦点放在.element中，以设置样式｛background color:green；｝<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>

我也有同样的问题，但后来我有了“嘘”的一刻。而不是写作

x ~ y

写

y ~ x

显然，这与“x”而不是“y”匹配，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。

我意识到最初的问题是一个CSS问题，所以这个答案可能完全不相关，但其他Javascript用户可能会像我一样通过搜索发现这个问题。

这是类似问题的链接

CSS选择所有以前的兄弟姐妹以获得星级

因此，我使用每个人的回答来发布我的解决方案，任何人都可以将其作为参考，并可能提出改进建议。

//仅用于检查输入值//Consts公司const starRadios=document.querySelectorAll（'input[name=“rating”]'）；//事件监听器starRadios.forEach（（radio）=>radio.addEventListener（'change'，getStarRadioValue））；//获取星形无线电值函数getStarRadioValue（事件）｛警报（event.target.value）//用它做点什么};.星级{字体大小：1.5rem；unicode bidi：bidi覆盖；方向：rtl；文本对齐：左侧；}.star-rating.editable标签：悬停{光标：指针；}.star-rating.editable.icon星形：悬停，.star-rating.editable.icon星形：悬停~.icon星形{背景色：#fb2727！重要的}.icon星形{位置：相对；背景色：#72747d；宽度：32px；高度：32px；显示：内联块；过渡：背景色0.3s；}.icon-star填充{背景色：#fb2727；}.icon星形>标签{显示：内联块；宽度：100%；高度：100%；左：0；顶部：0；位置：绝对；}.icon star>标签>输入[类型=“radio”]{位置：绝对；顶部：0；左：0；变换：translateY（50%）translateX（50%）；显示：无；}<div class=“星级可编辑”><span class=“icon star”><标签><input type=“radio”name=“rating”value=“5”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“4”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“3”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“2”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“1”/></label></span></div>