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

在我的情况下，我想要一个主要的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/

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

选择器级别4建议：has（）（以前是主题指示符！），有一天，它将允许您选择前一个兄弟姐妹：

previous:has(+ next) {}

或（对于一般上一个兄弟姐妹而不是相邻兄弟姐妹）：

previous:has(~ next) {}

在撰写本文时：has｛｝被大多数但不是所有主要浏览器支持。支持正在改善。

多年来，这个答案吸引了数十条“仍然不支持”的评论（现已删除）。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。

我的要求是在@Quentin的回答帮助下选择当前悬停的项目的前两个兄弟姐妹，我选择了前两个姐妹。

.儿童{宽度：25px；高度：25px；}.child:悬停{背景：蓝色；}.child:has（+.child:悬停）{背景：黄色；}.child:has（+.child+.child:悬停）{背景：绿色；}.child:悬停+.child{背景：红色；}.child:悬停+.child+.child{背景：洋红色；}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>

选择所有以前的同级

.儿童{宽度：25px；高度：25px；}.child:悬停{背景：蓝色；}.child:has（~.child:悬停）{背景：红色；}<ul class=“parent”><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li><li class=“child”></li></ul>

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

x ~ y

写

y ~ x

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

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

没有这样的选择器，但在DOM API中有一个非常只读的属性

Node.previousSibling节点