+ 是为了下一个兄弟姐妹。以前的兄弟姐妹是否有同等效力？
+ 是为了下一个兄弟姐妹。以前的兄弟姐妹是否有同等效力？
不，没有“以前的兄弟”选择器。
在相关的说明， ~ 是一般继承兄弟（意思是元素在此之后，但不一定紧接在之后）并且是CSS3选择器。 + 是为了下一个兄弟，是CSS2.1。
看到 相邻的兄弟组合子 从 选择者等级3 和 5.7相邻的兄弟选择器 从 层叠样式表2级修订版1（CSS 2.1）规范。
我找到了一种方式来塑造所有以前的兄弟姐妹（相反的 ~）可能会根据您的需要而有效。
假设你有一个链接列表，当悬停在一个链接上时，所有以前的链接都应该变为红色。你可以这样做：
/* default link color is blue */
.parent a {
color: blue;
}
/* prev siblings should be red */
.parent:hover a {
color: red;
}
.parent a:hover,
.parent a:hover ~ a {
color: blue;
}<div class="parent">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>order 柔性和网格布局的属性。我将在下面的示例中关注flexbox，但相同的概念适用于Grid。
使用flexbox，可以模拟先前的兄弟选择器。
特别是flex order 属性可以在屏幕上移动元素。
这是一个例子：
当元素B悬停时，您希望元素A变为红色。
<ul> <li>A</li> <li>B</li> </ul>
脚步
制作 ul 一个弹性容器。
ul { display: flex; }
在标记中反转兄弟姐妹的顺序。
<ul>
<li>B</li>
<li>A</li>
</ul>
使用兄弟选择器来定位元素A（~ 要么 + 会做） 。
li:hover + li { background-color: red; }
使用flex order 在视觉显示上恢复兄弟姐妹的顺序的属性。
li:last-child { order: -1; }
......瞧！先前的兄弟选择器诞生（或至少模拟）。
这是完整的代码：
ul {
display: flex;
}
li:hover + li {
background-color: red;
}
li:last-child {
order: -1;
}
/* non-essential decorative styles */
li {
height: 200px;
width: 200px;
background-color: aqua;
margin: 5px;
list-style-type: none;
cursor: pointer;
}<ul>
<li>B</li>
<li>A</li>
</ul>来自flexbox规范：
默认情况下，Flex项目的显示和排列顺序与它们在源文档中显示的顺序相同。该
order属性可用于更改此顺序。该
order属性控制弹性项目在弹性容器中的显示顺序，方法是将它们分配给顺序组。它只需一个<integer>value，指定flex项的哪个序数组 属于。
最初的 order 所有弹性项的值为0。
使用flex创建的“以前的兄弟选择器”的示例 order 属性。
.container { display: flex; }
.box5 { order: 1; }
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }
.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }
/* non-essential decorative styles */
.container {
padding: 5px;
background-color: #888;
}
.box {
height: 50px;
width: 75px;
margin: 5px;
background-color: lightgreen;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
}<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>
<div class="container">
<div class="box box1"><span>1</span></div>
<div class="box box2"><span>2</span></div>
<div class="box box3"><span>3</span></div>
<div class="box box5"><span>HOVER ME</span></div>
<div class="box box4"><span>4</span></div>
</div>
<br>
<div class="container">
<div class="box box9"><span>HOVER ME</span></div>
<div class="box box12"><span>HOVER ME</span></div>
<div class="box box6"><span>6</span></div>
<div class="box box7"><span>7</span></div>
<div class="box box8"><span>8</span></div>
<div class="box box10"><span>10</span></div>
<div class="box box11"><span>11</span></div>
</div>
<br>
<div class="container">
<div class="box box21"><span>HOVER ME</span></div>
<div class="box box13"><span>13</span></div>
<div class="box box14"><span>14</span></div>
<div class="box box15"><span>15</span></div>
<div class="box box16"><span>16</span></div>
<div class="box box17"><span>17</span></div>
<div class="box box18"><span>18</span></div>
<div class="box box19"><span>19</span></div>
<div class="box box20"><span>20</span></div>
</div>Flexbox打破了人们对CSS的长期信念。
一个这样的信念是 CSS中无法使用上一个兄弟选择器。
说这种信念是普遍的，这是轻描淡写的。以下是Stack Overflow相关问题的示例：
如上所述，这种信念并不完全正确。可以使用flex在CSS中模拟先前的兄弟选择器 order 属性。
该 z-index 神话
另一个长期存在的信念是 z-index 仅适用于定位元素。
事实上，最新版本的规格 - W3C编辑的草稿 - 仍然断言这是真的：
z-index
- 价值：汽车| |继承
- 初始：自动
- 适用于：定位元素
- 继承：没有
- 百分比：N / A.
- 媒体：视觉
- 计算值：如指定的那样
（重点补充）
但实际上，这些信息已经过时且不准确。
元素是 弹性物品 要么 网格项目 甚至可以创建堆叠上下文 position 是 static。
Flex项目绘制与内联块完全相同，除了使用订单修改的文档顺序代替原始 文件订单，和
z-index除了auto即使创建堆叠上下文position是static。网格项的绘制顺序与内联块完全相同，但订单修改的文档顺序除外 用来代替原始文件订单，和
z-index除了auto即使创建堆叠上下文position是static。
这是一个演示 z-index 处理未定位的flex项目： https://jsfiddle.net/m0wddwxs/
我有同样的问题，但后来我有一个“呃”的时刻。而不是写作
x ~ y
写
y ~ x
显然这匹配“x”而不是“y”，但它回答“有匹配吗？”问题，简单的DOM遍历可以比在javascript中循环更有效地使你到达正确的元素。
我意识到最初的问题是一个CSS问题所以这个答案可能完全无关紧要，但其他Javascript用户可能会像我一样通过搜索偶然发现问题。
二 技巧。基本上反转HTML中所需元素的HTML顺序并使用
~ 下一个兄弟姐妹 运营商：
float-right + 逆转HTML元素的顺序div{ /* Do with the parent whatever you know just to make the
inner float-right elements appear where desired */
display:inline-block;
}
span{
float:right; /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:red;
} <div>
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>direction: rtl; +逆内元素的顺序.inverse{
direction: rtl;
display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
background:gold;
}Hover one span and see the previous elements being targeted!<br>
<div class="inverse">
<!-- Reverse the order of inner elements -->
<span>5</span>
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
</div>
+是为了下一个兄弟姐妹。有没有与以前相同的 兄弟？
! 和 ?有 2 随后的兄弟选择者
您可以使用HTML中的元素顺序。然后除了使用 order 如在 Michael_B的回答 您可以使用 flex-direction: row-reverse; 要么 flex-direction: column-reverse; 取决于您的布局。
工作样本：
.flex {
display: flex;
flex-direction: row-reverse;
/* Align content at the "reversed" end i.e. beginning */
justify-content: flex-end;
}
/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
background-color: lime;
}
/* styles just for demo */
.flex-item {
background-color: orange;
color: white;
padding: 20px;
font-size: 3rem;
border-radius: 50%;
}<div class="flex">
<div class="flex-item">5</div>
<div class="flex-item">4</div>
<div class="flex-item">3</div>
<div class="flex-item">2</div>
<div class="flex-item">1</div>
</div>目前没有正式的方法可以做到这一点，但你可以用一个小技巧来实现这一目标！请记住它是实验性的，它有一些限制...... （检查 这个链接 如果你担心导航兼容性）
你可以做的是使用CSS3选择器：伪classe调用 nth-child()
#list>* {
display: inline-block;
padding: 20px 28px;
margin-right: 5px;
border: 1px solid #bbb;
background: #ddd;
color: #444;
margin: 0.4em 0;
}
#list :nth-child(-n+4) {
color: #600b90;
border: 1px dashed red;
background: orange;
}<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list">
<span>1</span><!-- this will be selected -->
<p>2</p><!-- this will be selected -->
<p>3</p><!-- this will be selected -->
<div>4</div><!-- this will be selected -->
<div>5</div>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>