小开

最佳答案

不，没有“以前的兄弟姐妹”选择器。

在相关的说明中，~是一般的后继兄弟（意味着元素在这个元素之后，但不一定紧随其后），并且是一个CSS3选择器。+是下一个兄弟，是CSS2.1。

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

小开

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

x ~ y

写

y ~ x

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

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

小开

选择器级别4提议#0（以前的主题指示器!），有一天，它将允许您选择以前的兄弟姐妹：

previous:has(+ next) {}

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

previous:has(~ next) {}

在撰写本文时，除了不是所有主要浏览器之外，大多数浏览器的:has{}是支持。支持正在改善。

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

小开

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

假设我们有：

<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，对于那些在LIs中没有UL元素（或其他标签）的链接。

小开

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

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

我在这个例子中使用FontAwete并在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 */}

超文本标记语言：（40）

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

小开

如果你知道确切的位置，基于:nth-child()的排除所有以下兄弟姐妹将起作用。

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

这将选择第3个之前的所有li（例如第1个和第2个）。但是，在我看来，这看起来很丑陋，并且使用范围非常紧张。

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

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

这是一样的。

小开

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

您可以做的是使用CSS3选择器：名为nth-child()的伪类

#list>* {display: inline-block;padding: 20px 28px;margin-right: 5px;border: 1px solid #bbb;background: #ddd;color: #444;margin: 0.4em 0;}
#list :nth-child(-n+4) {color: #600b90;border: 1px dashed red;background: orange;}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>
<div id="list"><span>1</span><!-- this will be selected --><p>2</p><!-- this will be selected --><p>3</p><!-- this will be selected --><div>4</div><!-- this will be selected --><div>5</div><p>6</p><p>7</p><p>8</p><p>9</p></div>

限制

您不能根据下一个元素的类选择上一个元素
这对于伪类来说是一样的

小开

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

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

/* default link color is blue */.parent a {color: blue;}
/* prev siblings should be red */.parent:hover a {color: red;}.parent a:hover,.parent a:hover ~ a {color: blue;}

<div class="parent"><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a><a href="#">link</a></div>

小开

3技巧：
在超文本标记语言中反转元素的超文本标记语言顺序，
并使用~下一个兄弟姐妹运算符：

1.使用CSS Flex和ROW-REST

.reverse {display: inline-flex;flex-direction: row-reverse;}.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */background:gold;}

Hover a SPAN and see the previous elements being styled!<br>
<div class="reverse"><!-- Reverse the order of inner elements --><span>5</span><span>4</span><span>3</span><span>2</span><span>1</span></div>

2.使用Flex与方向：RTL

.reverse {display: inline-flex;direction: rtl;}.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */background: red;}

Hover a SPAN and see the previous elements being styled!<br>
<div class="reverse"><!-- Reverse the order of inner elements --><span>5</span><span>4</span><span>3</span><span>2</span><span>1</span></div>

3.使用浮点右

.reverse {display: inline-block;}.reverse span{float: right;}.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */background: red;}

Hover a SPAN and see the previous elements being styled!<br>
<div class="reverse"><!-- Reverse the order of inner elements --><span>5</span><span>4</span><span>3</span><span>2</span><span>1</span></div>

小开

考虑flex和网格布局的`order`属性。

我将在下面的示例中重点介绍flexbox，但同样的概念也适用于Grid。

使用flexbox，可以模拟以前的兄弟选择器。

特别是，flexorder属性可以在屏幕周围移动元素。

这里有一个例子：

当元素B悬停时，您希望元素A变为红色。
<ul><li>A</li><li>B</li></ul>

步骤

使ul成为一个flex容器。
```
ul { display: flex; }
```

Reverse the order of siblings in the mark-up.
```
<ul><li>B</li><li>A</li></ul>
```

Use a sibling selector to target Element A (~ or + will do) .
```
li:hover + li { background-color: red; }
```

Use the flex order property to restore the order of siblings on the visual display.
```
li:last-child { order: -1; }
```

...and voilà! A previous sibling selector is born (or at least simulated).

Here's the full code:

ul {display: flex;}
li:hover + li {background-color: red;}
li:last-child {order: -1;}
/* non-essential decorative styles */li {height: 200px;width: 200px;background-color: aqua;margin: 5px;list-style-type: none;cursor: pointer;}

<ul><li>B</li><li>A</li></ul>

从flexbox规范：

5.4。显示顺序：order属性

默认情况下，Flex项的显示和布局顺序与它们在源文档中出现的顺序相同。这个order属性可用于更改此顺序。

order属性控制flex项目在flex容器中出现的顺序，方法是将它们分配给序数组。它接受一个<integer>值，该值指定flex项目的序数组属于.

所有flex项目的初始order值为0。

另见#0在CSS网格布局规范中。

使用flexorder属性创建的“以前的兄弟选择器”示例。

.container { display: flex; }
.box5 { order: 1; }.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }
.box6 { order: -4; }.box7 { order: -3; }.box8 { order: -2; }.box9 { order: -1; }.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;font-size: 1.5em; }.box12 { order: 2; }.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;font-size: 1.5em; }.box21 { order: 1; }.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }
/* non-essential decorative styles */.container {padding: 5px;background-color: #888;}.box {height: 50px;width: 75px;margin: 5px;background-color: lightgreen;display: flex;justify-content: center;align-items: center;text-align: center;cursor: pointer;}

<p>Using the flex <code>order</code> property to construct a previous sibling selector</p>
<div class="container"><div class="box box1"><span>1</span></div><div class="box box2"><span>2</span></div><div class="box box3"><span>3</span></div><div class="box box5"><span>HOVER ME</span></div><div class="box box4"><span>4</span></div></div>
<br>
<div class="container"><div class="box box9"><span>HOVER ME</span></div><div class="box box12"><span>HOVER ME</span></div><div class="box box6"><span>6</span></div><div class="box box7"><span>7</span></div><div class="box box8"><span>8</span></div><div class="box box10"><span>10</span></div><div class="box box11"><span>11</span></div></div>
<br>
<div class="container"><div class="box box21"><span>HOVER ME</span></div><div class="box box13"><span>13</span></div><div class="box box14"><span>14</span></div><div class="box box15"><span>15</span></div><div class="box box16"><span>16</span></div><div class="box box17"><span>17</span></div><div class="box box18"><span>18</span></div><div class="box box19"><span>19</span></div><div class="box box20"><span>20</span></div></div>

jsFiddle

关于CSS的两个过时的信念

Flexbox正在打破人们对CSS的长期信念。

一个这样的信念是前一个兄弟选择器在CSS中是不可能的。

说这种信念很普遍是轻描淡写的。以下是仅在Stack Overflow上的相关问题示例：

如上所述，这种信念并不完全正确。可以使用flexorder属性在CSS中模拟以前的兄弟选择器。

0号神话

另一个长期存在的信念是z-index仅适用于定位元素。

事实上，该规范的最新版本——W3C编辑草稿——仍然断言这是真的：

9.9.1指定堆栈级别：z-index属性

z-index

值：自动继承
初始：自动
适用于：定位元素
继承：没有
百分比：不适用
媒体：视觉
计算值：指定

_{（着重部分由作者标明）}

然而，实际上，这些信息已经过时且不准确。

弹性项目或网格项的元素可以创建堆叠上下文，即使position是static。

4.3. Flex项目Z排序

Flex项目绘制与内联块完全相同，除了使用订单修改的文档订单代替原始文档顺序和auto以外的z-index值创建堆叠上下文，即使position是static。

5.4。Z轴排序：z-index属性

网格项的绘制顺序与内联块完全相同，只是顺序修改的文档顺序是用于代替原始文档顺序，并且auto以外的z-index值创建堆叠上下文，即使position就是static

下面是z-index在非定位的flex项目上的演示：https://jsfiddle.net/m0wddwxs/

小开

另一个flexbox解决方案

您可以在超文本标记语言中使用元素的倒序。然后除了使用order之外，您还可以使用flex-direction: row-reverse;或flex-direction: column-reverse;，具体取决于您的布局。

工作样本：

.flex {display: flex;flex-direction: row-reverse;/* Align content at the "reversed" end i.e. beginning */justify-content: flex-end;}
/* On hover target its "previous" elements */.flex-item:hover ~ .flex-item {background-color: lime;}
/* styles just for demo */.flex-item {background-color: orange;color: white;padding: 20px;font-size: 3rem;border-radius: 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>

小开

+是下一个兄弟姐妹。前一个有等效的吗兄弟？

您可以使用两个斧头选择器：`!`和`?`

在常规CSS中有2个后续兄弟选择器：

+是立即后续兄弟选择器
~是任何后续兄弟选择器

在传统的CSS中，有没有先前的兄弟选择器。

但是，在斧头 CSS后处理器库中，有2个以前的兄弟选择器：

?是立即前一个兄弟选择器（与+相反）
!是任何前一个兄弟选择器（与~相反）

工作示例：

在下面的例子中：

.any-subsequent:hover ~ div选择任何后续div
.immediate-subsequent:hover + div选择紧随其后的div
.any-previous:hover ! div选择任何先前的div
.immediate-previous:hover ? div选择前一个div

div {display: inline-block;width: 60px;height: 100px;color: rgb(255, 255, 255);background-color: rgb(255, 0, 0);text-align: center;vertical-align: top;cursor: pointer;opacity: 0;transition: opacity 0.6s ease-out;}
code {display: block;margin: 4px;font-size: 24px;line-height: 24px;background-color: rgba(0, 0, 0, 0.5);}
div:nth-of-type(-n+4) {background-color: rgb(0, 0, 255);}
div:nth-of-type(n+3):nth-of-type(-n+6) {opacity: 1;}
.any-subsequent:hover ~ div,.immediate-subsequent:hover + div,.any-previous:hover ! div,.immediate-previous:hover ? div {opacity: 1;}

<h2>Hover over any of the blocks below</h2>
<div></div><div></div>
<div class="immediate-previous">Hover for <code>?</code> selector</div><div class="any-previous">Hover for <code>!</code> selector</div><div class="any-subsequent">Hover for <code>~</code> selector</div><div class="immediate-subsequent">Hover for <code>+</code> selector</div>
<div></div><div></div>
<script src="https://rouninmedia.github.io/axe/axe.js"></script>

小开

我有一个类似的问题，发现所有这种性质的问题都可以解决如下：

给你所有的物品一个风格。
给您选择的项目一个样式。
使用+或~给下一个项目一个样式。

通过这种方式，您将能够设置当前、上一个项目（所有项目都被当前和下一个项目覆盖）和下一个项目的样式。

例子：

/* 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>

希望它能帮助某人。

小开

不。通过CSS是不可能的。它将“级联”放在心上；-）。

但是，如果您能够将javascript添加到您的页面，那么一点点jQuery可以让您实现最终目标。
您可以使用jQuery的find对您的目标元素/class/id执行“展望”，然后回溯以选择您的目标。
然后使用jQuery为元素重写DOM（CSS）。

基于Mike Brant的回答，下面的jQuery代码片段可以提供帮助。

$('p + ul').prev('p')

这首先选择紧随<p>之后的所有<ul>。
然后它“回溯”从那组<ul>中选择所有以前的<p>。

实际上，通过jQuery选择了“以前的兄弟姐妹”。
现在，使用.css函数传入该元素的CSS新值。

在我的例子中，我正在寻找一种方法来选择id#full-width的DIV，但前提是它有一个（间接）子代DIV，类为.companies。

我控制了.companies下的所有超文本标记语言，但无法更改上面的任何超文本标记语言。而瀑布只有一个方向：下降。

因此，我可以选择ALL#full-width。
或者我可以选择只跟在#full-width后面的.companies。
但我只能选择没有#full-width进行.companies。

再一次，我无法在超文本标记语言中添加.companies。这部分超文本标记语言是外部编写的，并包装了我们的代码。

但是使用jQuery，我可以选择所需的#full-width，然后分配适当的样式：

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

这会找到所有#full-width .companies，并只选择那些.companies，类似于选择器用于针对CSS标准中的特定元素的方式。
然后它使用.parents“回溯”并选择.companies的所有父母，
但是过滤这些结果以仅保留#fill-width元素，因此最终，
它只选择#full-width元素，如果它有.companies类后代。
最后，它为结果元素分配一个新的CSS（width）值。

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {background-color: lightblue;width: 120px;height: 40px;border: 1px solid gray;padding: 5px;}.wrapper {background-color: blue;width: 250px;height: 165px;}.parent {background-color: green;width: 200px;height: 70px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html><div class="wrapper">
<div class="parent">"parent" turns red<div class="change-parent">descendant: "change-parent"</div></div>  
<div class="parent">"parent" stays green<div class="nope">descendant: "nope"</div></div>  
</div>Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br><b>Only</b> if it <b>has</b> a descendant of "change-parent".<br><br>(reverse cascade, look ahead, parent un-descendant)</html>

jQuery参考文档：
$（）或jQuery（）： DOM元素。
.找到：获取当前匹配元素集中每个元素的后代，由选择器、jQuery对象或元素过滤。
.<强>父母：获取匹配元素集中每个元素的前一个兄弟姐妹。如果提供了选择器，它仅在与该选择器匹配时检索前一个兄弟姐妹（过滤结果以仅包含列出的元素/选择器）。
.css：为匹配的元素集设置一个或多个CSS属性。

小开

我需要一个解决方案来选择之前的兄弟tr。我使用React和Styled组件想出了这个解决方案。这不是我的确切解决方案（这是几个小时后的内存）。我知道setHighlight terRow函数中存在缺陷。

OnMouseover一行将行索引设置为状态，并用新的背景颜色重新渲染前一行

class ReactClass extends Component {constructor() {this.state = {highlightRowIndex: null}}
setHighlightedRow = (index) => {const highlightRowIndex = index === null ? null : index - 1;this.setState({highlightRowIndex});}
render() {return (<Table><Tbody>{arr.map((row, index) => {const isHighlighted = index === this.state.highlightRowIndexreturn {<TrowisHighlighted={isHighlighted}onMouseOver={() => this.setHighlightedRow(index)}onMouseOut={() => this.setHighlightedRow(null)}>...</Trow>}})}</Tbody></Table>)}}
const Trow = styled.tr`& td {background-color: ${p => p.isHighlighted ? 'red' : 'white'};}
&:hover {background-color: red;}`;

小开

没有，有。

如果您必须将标签放在输入之前，只需将标签放在输入之后，并将标签和输入都保留在<说明>div中，并将<说明>div样式如下：

.input-box {display: flex;flex-direction: column-reverse;}

<div class="input-box"><inputid="email"class="form-item"/>
<label for="email" class="form-item-header">E-Mail*</label></div>

现在您可以应用css中可用的标准下一个兄弟样式选项，它将显示为您正在使用以前的兄弟样式。

小开

这是一个类似问题的链接

CSS选择所有以前的兄弟姐妹进行星级评定

因此，我使用每个人的回复发布我的解决方案，任何人都可以将其用作参考，并可能推荐改进。

// Just to check input value// Constsconst starRadios = document.querySelectorAll('input[name="rating"]');
// EventListenersstarRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));
// Get star radio valuefunction getStarRadioValue(event) {alert(event.target.value)// Do something with it};

.star-rating {font-size: 1.5rem;unicode-bidi: bidi-override;direction: rtl;text-align: left;}.star-rating.editable label:hover {cursor: pointer;}.star-rating.editable .icon-star:hover,.star-rating.editable .icon-star:hover ~ .icon-star {background-color: #fb2727 !important;}
.icon-star {position: relative;background-color: #72747d;width: 32px;height: 32px;display: inline-block;transition: background-color 0.3s ease;}.icon-star.filled {background-color: #fb2727;}
.icon-star > label {display: inline-block;width: 100%;height: 100%;left: 0;top: 0;position: absolute;}
.icon-star > label > input[type="radio"] {position: absolute;top: 0;left: 0;transform: translateY(50%) translateX(50%);display: none;}

<div class="star-rating editable"><span class="icon-star"><label><input type="radio" name="rating"  value="5" /></label></span><span class="icon-star"><label><input type="radio" name="rating" value="4" /></label></span><span class="icon-star"><label><input type="radio" name="rating" value="3" /></label></span><span class="icon-star"><label><input type="radio" name="rating" value="2" /></label></span><span class="icon-star"><label><input type="radio" name="rating"  value="1" /></label></span></div>

小开

覆盖悬停上下一个兄弟姐妹的样式，这样看起来只有以前的兄弟姐妹在悬停上添加了样式。

ul li {color: red;}
ul:hover li {color: blue;}
ul:hover li:hover ~ li{color: red;}

<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>

小开

/* Add a style to all the children, then undo the style to the targetand sibling children of your target. */
ul>li {color: red;}
ul>li.target,ul>li.target~li {color: inherit;}

<ul><li>before</li><li class="target">target</li><li>after</li><li>after</li></ul>

小开

我遇到了同样的问题，当我试图在输入焦点上更改前置图标填充颜色时，我的代码看起来像这样：

<template #append><b-input-group-text><strong class="text-danger">!</strong></b-input-group-text></template><b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

问题是我使用vue-bootstrap插槽来注入前置，所以即使我改变了位置，输入后仍然会渲染

好吧，我的解决方案是滑动它们的位置，并添加自定义前缀和使用过的~符号，因为css不支持以前的兄弟姐妹。

<div class="form-input-prepend"><svg-vue icon="common.lock" /></div><b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

scss样式

.form-control:focus ~ .form-input-prepend {svg path {fill: $accent;}}

所以只要试着改变它的位置，必要时使用css<强>秩序或位置：绝对；来实现你想要的，并避免使用javascript来满足这种需求。

小开

你可以用双重否定

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

将SELECTOR替换为TAG或.CLASS（使用#ID可能太具体了）。将FILTER替换为其他:PSUEDO-SELECTOR（我只尝试过:hover）或.CLASS（更多用于切换Javascript）。

由于典型的用法可能依赖于悬停（参见下面的示例）

/* Effect only limited when hovering */TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}/* Effect only applied when hovering */PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/* Solution */div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {background-color:red;border-radius:1.5em;}div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {background-color:yellow;}
/* Make pretty (kinda) */div.parent {width:9em;height:9em;/* Layout */display:grid;grid-template-columns : auto auto auto;grid-template-rows : auto auto auto;}div.child {/* Dimensions */height:3em;width:3em;/* Layout */position:relative;/* Cursor */cursor: pointer;/* Presentation */border: 1px black solid;border-radius:1.5em;}.star {/* Dimensions */width: 2.5em;height: 2.5em;/* Placement */position:absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);/* Geometry */-webkit-clip-path: polygon(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);clip-path: polygon(50% 0%,63% 38%,100% 38%,69% 59%,82% 100%,50% 75%,18% 100%,31% 59%,0% 38%,37% 38%);/* Presentation */background-color: lightgrey;}div.child:hover {/* Presentation */background-color:yellow;border-radius:1.5em;}div.child:hover > div.star {/* Presentation */background-color:red;}

<div class="parent"><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div><div class="child" href="#"><div class="star"></div></div></div>

小开

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

Node.previousSibling

小开

没有“上一个选择器”，但您可以使用:not和~的组合（“后选择器”）。没有相反的顺序，没有javascript。

.parent a{color: blue}
.parent a.active{color: red}
.parent a:not(.parent a.active ~ a){color: red}

<div class="parent"><a href="">link</a><a href="">link</a><a href="" class="active">link</a><a href="">link</a><a href="">link</a></div>

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

小开

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“sibling_2”上以更改下面示例中的“sibling_1”：

<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>

由于没有以前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用它们，使它们看起来相同。

.parent {display: flex;flex-direction: row-reverse;}

现在你可以像这样选择它们。

.sibling_1:hover ~ .sibling_2 {#your CSS}

小开

我通过将我的元素放在flexbox中然后使用flex-direction: column-reverse来解决这个问题。

然后我不得不在超文本标记语言中手动反转我的元素（以相反的顺序排列），它看起来很正常，而且有效！

<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>

小开

对于我的用例，需要在焦点上更改以前的元素样式，并且在父元素中仅悬停2个项目。为此使用:focus-within和:hover伪类。

每次发生焦点/悬停事件时都这样选择

.root-element:hover .element-to-style { background-color: red;}.root-element:focus-within .element-to-style { background-color: green;}

<div class="root-element"><span class="element-to-style"> TextFocused</span><input type="text" placeholder="type To Style"/>
</div>

小开

我的要求是在@Quentin的帮助下选择当前悬停项目的前一个和下一个兄弟姐妹我选择了以前的兄弟姐妹。

.child{width: 25px;height: 25px;}
.child:hover {background:blue;}
.child:has( + .child:hover) {background: yellow;}
.child:has(+ .child + .child:hover){background:green;}
.child:hover + .child {background: red;}
.child:hover + .child + .child {background: magenta;}

<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>

选择所有以前的兄弟姐妹

.child {width: 25px;height: 25px;}
.child:hover {background: blue;}
.child:has(~ .child:hover) {background: red;}

<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>

小开

您可以使用:has()如下。

.thePrevious:has(+ .theNextSibling)

我用它来修复重叠的引导模态，如下所示。如果有多个，任何以前的模态都将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){opacity: 0;}

小开

虽然没有以前的CSS选择器。我找到了一个快速简单的方法来自己选择一个。下面是超文本标记语言：

<div class="parent"><div class="child-1"></div><div class="child-2"></div></div>

在您的JavaScript中，只需执行：

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择parent div，然后从child-2 div中选择child-1 div。

如果您使用jQuery，您可以简单地执行：

$(".child-2").prev()

是否有“前兄弟姐妹”选择器？

限制