有没有“以前的兄弟”CSSselect器？
+是为下一个兄弟。 前面的兄弟姐妹有没有相同的东西？
不，没有“以前的兄弟姐妹”select器。
在一个相关的说明， ~是为一般的inheritance兄弟姐妹（意味着元素之后，但不一定紧接着），是一个CSS3select器。 +是下一个兄弟，是CSS2.1。
请参阅select器级别3和5.7中的邻接兄弟组合器 级联样式表级别2修订1（CSS 2.1）规范中的 邻接兄弟select器 。
我find了一种方式来devise所有以前的兄弟姐妹（ ~对面），可能取决于你需要什么。
比方说，你有一个链接列表，当它hover在一个，所有以前的应该变成红色。 你可以这样做：
/* 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>
select器级别4介绍! （如果我正确解释草稿）将允许您select所需的select器主题（在这种情况下， previous ）与：
!previous + next {}
…但在撰写本文时，浏览器支持还有一段距离。
有一个“以前的兄弟”CSSselect器？
这个问题有点矛盾。
层叠样式表。 瀑布就像一个瀑布：没有后退的动作。 所以，自然，CSS中没有以前的兄弟select器。
然而…
使用flexbox，可以模拟以前的兄弟select器。
特别是，flex order属性可以在屏幕上移动元素。
这是一个例子：
当元素B被徘徊时，您希望元素A变成红色。
<ul> <li>A</li> <li>B</li> </ul>
脚步
-
使
ul成为一个弹性容器。ul { display: flex; }
-
颠倒标记中的兄弟姐妹顺序。
<ul> <li>B</li> <li>A</li> </ul>
-
使用兄弟select器来定位元素A（
~或+会做）。li:hover + li { background-color: red; }
-
使用flex
order属性来恢复可视显示器上的兄弟的顺序。li:last-child { order: -1; }
…和瞧！ 以前的兄弟select器是天生的（或者至less是模拟的）。
以下是完整的代码：
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>
我有同样的问题，但是我有一个“唔”的时刻。 而不是写作
x ~ y
写
y ~ x
显然这匹配“x”而不是“y”，但它回答“有一个匹配？ 问题，简单的DOM遍历可能会比在JavaScript中循环更有效地让你到正确的元素。
我意识到原来的问题是一个CSS问题，所以这个答案可能是完全不相关的，但其他的Javascript用户可能会像我一样search这个问题。
两个技巧 。 基本上颠倒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>
目前没有官方的方法可以做到这一点，但是您可以使用一些小技巧来实现这一点！ 请记住，它是实验性的，它有一些限制…（如果您担心导航器的兼容性，请检查此链接 ）
你可以做的是使用CSS3select器：伪类叫做nth-child()
源代码
<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> #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; }
以工作为例
http://jsfiddle.net/aLhv9r1w/316/
限制
- 您不能根据下一个元素的类来select以前的元素
- 这对于伪类是一样的
+是为下一个兄弟。 前面的兄弟姐妹有没有相同的东西？
你可以使用两个斧子select器： ! 和?
在传统的CSS中有两个后续的兄弟select器：
-
+是紧接着的兄弟select器 -
~是任何后续的兄弟select器
在传统的CSS中， 没有以前的兄弟select器 。
但是，在CSS CSS后处理程序库中，有两个以前的兄弟select器：
-
?是前一个兄弟select符（+对面） -
!是任何以前的兄弟select器（~对面）
工作示例：
在下面的例子中：
-
.any-subsequent:hover ~ divselect任何后续的div -
.immediate-subsequent:hover + divselect直接后续div -
.any-previous:hover ! div.any-previous:hover ! divselect任何以前的div -
.immediate-previous:hover ? div.immediate-previous:hover ? divselect前一个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>
另一个flexbox解决scheme
您可以在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>
如果你知道确切的位置:nth-child()一个基于:nth-child()的排除所有下面的兄弟姐妹将工作。
ul li:not(:nth-child(n+3))
在第三名之前（例如第一名和第二名）select所有的选项。 但是，在我看来，这看起来很丑陋，并且有一个非常紧张的用例。
您也可以从右到左select第n个孩子：
ul li:nth-child(-n+2)
这是一样的。
不幸的是，没有“之前的”兄弟select器，但是你仍然可以通过使用定位来获得相同的效果（例如float right）。 这取决于你想要做什么。
就我而言，我想要一个主要的CSS五星评级系统。 我需要上色的星星（或交换图标）。 通过将每个元素正确地浮动，我基本上得到了相同的效果（因此星星的html必须写成“倒退”）。
我在这个例子中使用了FontAwesome，并在fa-star-o和fa-star的unicodes之间交换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/
根据你的确切目标，有一种方法可以实现父select器的有用性而不使用一个（即使存在一个）…
假设我们有：
<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元素（或其他标签）的那些链接。
