是否有“以前的兄弟”CSS选择器？

Question

是否有“以前的兄弟”CSS选择器？

加号（+）用于下一个兄弟。以前的兄弟姐妹是否有同等效力？

Answer 1

我找到了一种方法来塑造所有以前的兄弟姐妹（相反~），这取决于你需要什么。假设您有一个链接列表，当悬停在一个链接上时，所有以前的链接都应该变为红色。你可以这样做：/* default link color is blue */.parent a {&nbsp; color: blue;}/* prev siblings should be red */.parent:hover a {&nbsp; color: red;}.parent a:hover,.parent a:hover ~ a {&nbsp; color: blue;}<div class="parent">&nbsp; <a href="#">link</a>&nbsp; <a href="#">link</a>&nbsp; <a href="#">link</a>&nbsp; <a href="#">link</a>&nbsp; <a href="#">link</a></div>

Answer 2

选择器级别4引入:has()（以前是主题指示符!），这将允许您选择以前的兄弟：previous:has(+&nbsp;next)&nbsp;{}...但在撰写本文时，浏览器支持已超出前沿。

Answer 3

考虑orderflex和网格布局的属性。我将在下面的示例中关注flexbox，但相同的概念适用于Grid。使用flexbox，可以模拟先前的兄弟选择器。特别是，flex&nbsp;order属性可以在屏幕周围移动元素。这是一个例子：当元素B悬停时，您希望元素A变为红色。<ul> &nbsp;&nbsp;&nbsp;&nbsp;<li>A</li> &nbsp;&nbsp;&nbsp;&nbsp;<li>B</li></ul>脚步制作ul一个flex容器。ul&nbsp;{&nbsp;display:&nbsp;flex;&nbsp;}在标记中反转兄弟姐妹的顺序。<ul> &nbsp;&nbsp;&nbsp;<li>B</li> &nbsp;&nbsp;&nbsp;<li>A</li></ul>使用兄弟选择器来定位元素A（~或+将执行）。li:hover&nbsp;+&nbsp;li&nbsp;{&nbsp;background-color:&nbsp;red;&nbsp;}使用flex&nbsp;order属性可以恢复可视显示中兄弟节点的顺序。li:last-child&nbsp;{&nbsp;order:&nbsp;-1;&nbsp;}......瞧！先前的兄弟选择器诞生（或至少模拟）。这是完整的代码：ul {&nbsp; &nbsp; display: flex;}li:hover + li {&nbsp; &nbsp; background-color: red;}li:last-child {&nbsp; &nbsp; order: -1;}/* non-essential decorative styles */li {&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; width: 200px;&nbsp; &nbsp; background-color: aqua;&nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; cursor: pointer;}<ul>&nbsp; &nbsp; <li>B</li>&nbsp; &nbsp; <li>A</li></ul>