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

previous:has(+ next) {}

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

previous:has(~ next) {}

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

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

没有，也有。

如果必须在输入之前放置标签，只需在输入之后放置标签，并将标签和输入保持在一个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/

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

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

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

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

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

这也是一样的。

根据您的确切目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性（即使存在）。。。

假设我们有：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做什么来使用间距使袜子块（包括袜子颜色）在视觉上突出？

什么会很好，但不存在：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在的内容：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这将所有锚链接设置为顶部有15px的边距，并将其重置为0，以用于LI中没有UL元素（或其他标签）的链接。

/*向所有子级添加样式，然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色：红色；}ul＞li目标，ul>li.target~li{颜色：继承；}＜ul＞<li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>