目前还没有正式的方法来做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制。。。（如果您担心导航器兼容性，请检查此链接）

您可以做的是使用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>

局限性

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

另一种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>

没有，也有。

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

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

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

不幸的是，没有“上一个”同级选择器，但您仍然可以通过使用定位（例如向右浮动）获得相同的效果。这取决于你想做什么。

在我的情况下，我想要一个主要的CSS五星评级系统。我需要为之前的星星上色（或更换图标）。通过将每个元素向右浮动，我基本上得到了相同的效果（因此，星星的html必须写为“向后”）。

我在本例中使用FontAwesome，并在fa-star-o和fa-star的unicode之间进行交换http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML格式：(40)

JSFiddle：http://jsfiddle.net/andrewleyva/88j0105g/

我解决了这个问题，将元素放在一个柔性框中，然后使用flex direction:column reverse。

然后，我不得不手动反转HTML中的元素（以相反的顺序排列），这看起来很正常，而且很有效！

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

这是类似问题的链接

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>