加号（ + ）用于下一个兄弟姐妹。
以前的兄弟姐妹有同等学历吗？
#1楼
选择器级别4引入了:has() （以前是主题指示器! ），它允许您使用以下选项选择先前的同级：
previous:has(+ next) {}
…但是在撰写本文时，它离浏览器支持的极限还有一段距离。
#2楼
不，没有“先前的兄弟”选择器。
与此相关的是， ~用于一般后继兄弟（意味着该元素在此之后，但不一定紧随其后），并且是CSS3选择器。 +是下一个兄弟姐妹，是CSS2.1。
看到相邻的兄弟组合子从选择器3级和5.7相邻同胞选择从层叠样式表级别2版本1（CSS 2.1）规范 。
#3楼
根据您的确切目标，有一种无需使用父选择器（即使存在一个父选择器）就可以实现其有用性的方法...
说我们有：
<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的边距，并且对于LI内部没有UL元素（或其他标签）的那些链接，将其重置为0。
#4楼
没有“以前的”兄弟选择很不幸，但你都不可能仍然获得通过使用定位（如浮动右）相同的效果。 这取决于您要执行的操作。
就我而言，我想要一个主要是CSS的5星级评分系统。 我需要为以前的星星涂色（或交换图标）。 通过正确地浮动每个元素，我基本上得到了相同的效果（因此，星星的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/
#5楼
如果您知道确切的位置，则可以使用基于:nth-child()的方式排除以下所有同级物品。
ul li:not(:nth-child(n+3))
它将选择第3个（例如第1个和第2个）之前的所有li 。 但是，在我看来，这看起来很丑陋，并且用例非常紧凑。
您还可以从右到左选择第n个子级：
ul li:nth-child(-n+2)
哪个做的一样。
#6楼
目前尚无官方方法可以执行此操作，但是您可以使用一些技巧来实现此目的！ 请记住，这是实验性的，并且有一定的局限性...（如果您担心导航器的兼容性，请查看此链接 ）
您可以做的是使用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> 局限性
- 您无法根据下一个元素的类别选择上一个元素
- 伪类也一样
#7楼
我找到了一种样式来设置所有以前的兄弟姐妹（与~相对）的方法，具体取决于您的需要。
假设您有一个链接列表，将鼠标悬停在一个链接上时，所有先前的链接都应变为红色。 您可以这样做：
/* 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> #8楼
两个招 。 基本上反转所需元素在HTML中的HTML顺序并使用 ~ 下一个兄弟姐妹运算符：
float-right +反转HTML元素的顺序
div{ /* Do with the parent whatever you know just to make the inner float-right elements appear where desired */ display:inline-block; } span{ float:right; /* float-right the elements! */ } span:hover ~ span{ /* On hover target it's "previous";) elements */ background:red; } <div> <!-- Reverse the order of inner elements --> <span>5</span> <span>4</span> <span>3</span> <span>2</span> <span>1</span> </div> 家长direction: rtl; +反转内部元素的顺序
.inverse{ direction: rtl; display: inline-block; /* inline-block to keep parent at the left of window */ } span:hover ~ span{ /* On hover target it's "previous";) elements */ background:gold; } Hover one span and see the previous elements being targeted!<br> <div class="inverse"> <!-- Reverse the order of inner elements --> <span>5</span> <span>4</span> <span>3</span> <span>2</span> <span>1</span> </div> #9楼
考虑flex和grid布局的order属性。
在下面的示例中，我将重点介绍flexbox，但是相同的概念也适用于Grid。
使用flexbox，可以模拟先前的同级选择器。
特别是，flex order属性可以使元素在屏幕上移动。
这是一个例子：
您希望元素A悬停时元素A变为红色。
<ul> <li>A</li> <li>B</li> </ul>
脚步
使
ul为flex容器。ul { display: flex; }
反转标记中兄弟姐妹的顺序。
<ul> <li>B</li> <li>A</li> </ul>
使用同级选择器将元素A作为目标（
~或+可以）。li:hover + li { background-color: red; }
使用flex
order属性可恢复视觉显示中的兄弟姐妹顺序。li:last-child { order: -1; }
...和瞧！ 先前的同级选择器已出生（或至少已模拟）。
这是完整的代码：
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规范：
默认情况下，弹性项目的显示和布局方式与它们在源文档中显示的顺序相同。
order属性可用于更改此顺序。
order属性通过将弹性项目分配给顺序组来控制其在弹性容器中的显示顺序。 它采用单个<integer>值，该值指定弹性项目所属的顺序组。
所有弹性项目的初始order值为0。
另请参阅CSS Grid Layout规范中的order 。
使用flex order属性创建的“上一个同级选择器”的示例。
.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中不可能有以前的兄弟选择器 。
要说这种信念很普遍，那就轻描淡写了。 这是仅有关堆栈溢出的相关问题的样本：
- 使用选择器选择CSS中元素的先前同级
- CSS：选择上一个同级
- CSS选择上一个同级
- CSS中的上一个相邻选择器
- 选择悬停时的先前兄弟姐妹
- CSS选择器获取前面的同级
- 使用CSS更改悬停时同级元素的颜色
- 如何使用Selenium CSS语法选择上一个同级
- CSS选择器，用于选择另一个元素之前的元素？
- 如何仅使用CSS将样式添加到活动输入的先前同级中
- 下一个和上一个元素的CSS选择器
- 当div悬停时如何影响其他元素
如上所述，这种信念并不完全正确。 可以使用flex order属性在CSS中模拟先前的同级选择器。
z-index神话
另一个长期存在的信念是z-index仅适用于定位的元素。
实际上，该规范的最新版本– W3C编辑器的草案 –仍然认为这是正确的：
z-index
- 值：自动| | 继承
- 初始：自动
- 适用于：定位元素
- 继承：否
- 百分比：不适用
- 媒体：视觉
- 计算值：指定
（强调）
但是，实际上，此信息已过时且不准确。
即使position为static ，作为弹性项目或网格项目的元素也可以创建堆叠上下文。
Flex项的绘制与内联块完全相同，不同之处在于，使用经顺序修改的文档顺序代替原始文档顺序，并且即使
position为static，z-index值（auto创建以外的其他z-index值）也会创建堆叠上下文。网格项目的绘制顺序与嵌入式块完全相同，不同之处在于，使用顺序修改后的文档顺序代替原始文档顺序，并且即使
position为static，z-index值也会auto创建堆叠上下文，而不是auto创建堆叠上下文。
这是z-index在未定位的弹性项目上工作的演示： https : //jsfiddle.net/m0wddwxs/
#10楼
另一种flexbox解决方案
您可以使用相反的HTML元素顺序。 然后除了像Michael_B的答案那样使用order之外，还可以使用flex-direction: row-reverse; 或flex-direction: column-reverse; 取决于您的布局。
工作样本：
.flex { display: flex; flex-direction: row-reverse; /* Align content at the "reversed" end ie 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> #11楼
+是下一个兄弟姐妹。 以前的兄弟姐妹有同等学历吗？
您可以使用这两个斧头选择： ! 和?
常规CSS中有2个 后续的同级选择器 ：
-
+是紧邻的后续兄弟选择 -
~是任何后续的同级选择器
在常规CSS中， 没有先前的兄弟选择器 。
但是，在ax CSS后处理器库中，有两个 以前的兄弟选择器 ：
-
?是立即前一个兄弟选择器（的相对+） -
!是任何先前的同级选择器（~对面）
工作示例：
在下面的示例中：
-
.any-subsequent:hover ~ div选择任何后续div -
.immediate-subsequent:hover + div选择直接的后续div -
.any-previous:hover ! div.any-previous:hover ! div选择任何先前的div -
.immediate-previous:hover ? 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> #12楼
我遇到了类似的问题，发现所有这种性质的问题都可以通过以下方式解决：
- 给您所有的物品一个样式。
- 给您选择的项目一个样式。
- 使用+或〜为下一项提供样式。
这样，您就可以为当前，上一个项目（所有项目替换为当前和下一个项目）和下一个项目设置样式。
例：
/* 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>
希望它可以帮助某人。
#13楼
不可以。无法通过CSS。 它把“级联”深深地放在心上；-)。
但是，如果您能够将JavaScript添加到页面中，则使用jQuery可以使您达到最终目标。
您可以使用jQuery的find在目标元素/类/ id上执行“前瞻”，然后回溯以选择目标。
然后，您使用jQuery重新编写元素的DOM（CSS）。
根据Mike Brant的回答 ，以下jQuery代码段可能会有所帮助。
$('p + ul').prev('p')
这首先选择紧跟<p>所有<ul> <p> 。
然后，它“回溯”以从该组<ul>选择所有先前的<p> 。
实际上，已通过jQuery选择了“以前的兄弟姐妹”。
现在，使用.css函数传递该元素的CSS新值。
就我而言，我正在寻找一种方法来选择ID为#full-width的DIV，但仅当它具有.companies类的（间接）后代DIV .companies 。
我可以控制.companies下的所有HTML，但无法更改其上方的任何HTML。
级联仅向1个方向移动：向下。
因此，我可以选择ALL #full-width 。
或者，我可以选择仅跟随#full-width .companies 。
但我不能只选择#full-width s表示进行 .companies 。
再说一次，我无法在HTML的更高处添加.companies 。 HTML的那部分是外部编写的，并包装了我们的代码。
但是使用jQuery，我可以选择所需的#full-width ，然后分配适当的样式：
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
这将查找所有#full-width .companies ，并仅选择这些.companies ，类似于使用选择器定位CSS标准中的特定元素的方式。
然后，它使用.parents进行“回溯”并选择.companies所有父.companies ，
但对这些结果进行过滤以仅保留#fill-width元素，因此最后，
如果它具有.companies类后代，则仅选择#full-width元素。
最后，它为结果元素分配一个新的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元素。
。 find ：获取当前匹配元素集中每个元素的后代，并通过选择器，jQuery对象或元素进行过滤。
。 parent ：获取匹配元素集中每个元素的前一个同级。 如果提供了选择器，则仅当它与选择器匹配时才检索先前的同级（将结果筛选为仅包括列出的元素/选择器）。
。 css ：为匹配的元素集设置一个或多个CSS属性。
#14楼
我需要一个解决方案来选择以前的兄弟tr。 我使用React和Styled-components提出了这个解决方案。 这不是我的确切解决方案（这是几个小时后从内存中获取的）。 我知道setHighlighterRow函数存在缺陷。
OnMouseOver一行将设置行索引为state，并用新的背景色重新渲染上一行
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.highlightRowIndex
return {
<Trow
isHighlighted={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;
}
`;
#15楼
好吧，我参加聚会真的很晚，但是我真的很喜欢螳螂的回答。 它很聪明，不需要重新排列元素。 它甚至不需要修改HTML。
这很重要，因为CSS的全部目的是从标记中提取样式。
为了能够使用下一个相邻选择器而不是上一个相邻选择器，必须知道一个同级将匹配为前一个，而不是零。 在他的示例中，悬停告诉您。 您可能还具有其他可以告诉您的信息，例如父级上的aria-value-now属性。
我以为事情是通过这种方式来保持确定性并避免循环。
#16楼
我有同样的问题，但后来我有一个“ duh”时刻。 而不是写作
x ~ y
写
y ~ x
显然，它匹配“ x”而不是“ y”，但是它回答了“是否存在匹配？”。 问题，简单的DOM遍历可能比循环javascript更有效地将您带到正确的元素。
我意识到原来的问题是CSS问题，因此该答案可能完全不相关，但是其他Javascript用户可能会像我一样通过搜索偶然发现该问题。
扫一扫
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
