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

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

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

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

局限性

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

没有“前一选择器”，但可以使用：not和~（“后选择器”）的组合。没有逆序，没有javascript。

.父级a{颜色：蓝色}.父项a.活动{颜色：红色}.parent a：不是（.parent a.active~a）{颜色：红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>

我认为我的方法比“设置所有div的样式，而不是删除div之后的样式”，或者使用javascript，或者使用相反的顺序更直接。

没有，也有。

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

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

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

我遇到了一个类似的问题，发现所有这类问题都可以通过以下方式解决：

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样，您就可以设置当前项、先前项（所有项都被当前项和下一项覆盖）以及下一项的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望这对某人有所帮助。

三个技巧：基本上，颠倒HTML中元素的HTML顺序，并使用~Next同级运算符：

1.使用CSS Flex和行反转

.反向{显示：内联flex；弯曲方向：行反转；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：金色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>

2.使用方向为RTL的Flex

.反向{显示：内联flex；方向：rtl；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：红色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>

3.使用浮动右侧

反向｛显示：内联块；}.反向跨度{浮动：右侧；}.reverse span:hover~span｛/*在span悬停时，将其“先前”元素作为目标*/背景：红色；}将光标悬停在SPAN上，可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>