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

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

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

没有，也有。

如果必须在输入之前放置标签，只需在输入之后放置标签，并将标签和输入保持在一个div中，并按如下方式设置div的样式：

.输入框{显示：柔性；弯曲方向：列反转；}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>

现在，您可以应用css中提供的标准下一个同级样式选项，并且它看起来就像您使用的是上一个同级的样式。

不，没有“上一个同级”选择器。

在一个相关的注释中，~表示一般继承兄弟（意味着元素在这个之后，但不一定紧接着），并且是一个CSS3选择器。+用于下一个兄弟姐妹，为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1（CSS 2.1）规范中的5.7相邻同级选择器。

如果您知道确切的位置，那么基于：nth-child（）的排除以下所有兄弟姐妹将起作用。

ul li:not(:nth-child(n+3))

这将选择第三个之前的所有lis（例如第一个和第二个）。但是，在我看来，这看起来很难看，而且用例非常紧凑。

您还可以从右到左选择第n个子项：

ul li:nth-child(-n+2)

这也是一样的。

另一种flexbox解决方案

您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外，还可以使用灵活的方向：行反转；或弯曲方向：列反转；这取决于您的布局。

工作样本：

.flex弯曲{显示：柔性；弯曲方向：行反转；/*在“反转”结尾（即开头）对齐内容*/调整内容：柔性端；}/*在悬停目标上，其“先前”元素*/.flex项：悬停~.flex项{背景色：石灰；}/*仅用于演示的样式*/.flex项目{背景色：橙色；颜色：白色；填充：20px；字体大小：3rem；边界半径：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选择器：名为nth-child（）的伪类

#列表>*{显示：内联块；填充：20px 28px；右边距：5px；边框：1px实心#bbb；背景：#ddd；颜色：#444；边距：0.4em 0；}#列表：第n个子项（-n+4）{颜色：#600b90；边框：1px红色虚线；背景：橙色；}<p>orange元素是使用li:nth child（-n+4）选择的上一个同级li</p><div id=“list”><span>1</span><！--将选择--><p>2</p><！--将选择--><p>3</p><！--将选择--><div>4</div><！--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>

局限性

不能基于下一个元素的类选择上一个元素伪类也是如此