是否有"以前的兄弟"CSS选择器？

Question

加号(+)用于下一个兄弟.以前的兄弟姐妹是否有同等效力？

Answer 1

不,没有"以前的兄弟"选择器.

在相关的说明中,~是针对一般继承者兄弟(意思是元素在此之后,但不一定紧接在之后)并且是CSS3选择器.+是为了下一个兄弟,是CSS2.1.

看到相邻的兄弟组合子从选择器3级和5.7相邻同胞选择从层叠样式表级别2版本1(CSS 2.1)规范.

Answer 2

我找到了一种方法来塑造所有以前的兄弟姐妹(相反~),这取决于你需要什么.

假设您有一个链接列表,当悬停在一个链接上时,所有以前的链接都应该变为红色.你可以这样做:

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

Answer 3

选择器级别4引入:has()(以前是主题指示符!),这将允许您选择以前的兄弟:

previous:has(+ next) {}

...但在撰写本文时,浏览器支持已超出前沿.

Answer 4

考虑orderflex和网格布局的属性.

我将在下面的示例中关注flexbox,但相同的概念适用于Grid.

使用flexbox,可以模拟先前的兄弟选择器.

特别是,flex order属性可以在屏幕周围移动元素.

这是一个例子:

当元素B悬停时,您希望元素A变为红色.

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

脚步

1. 制作ul一个flex容器.
   
   

   ul { display: flex; }
   

2. 在标记中反转兄弟姐妹的顺序.
   
   

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

3. 使用兄弟选择器来定位元素A(~或+将执行).
   
   

   li:hover + li { background-color: red; }
   

4. 使用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规范:

5.4.显示顺序:order属性

默认情况下,Flex项目的显示和排列顺序与它们在源文档中显示的顺序相同.该 order属性可用于更改此顺序.

该order属性通过将弹性项目分配给序列组来控制弹性项目在弹性容器中的显示顺序.它需要一个<integer>值,它指定flex项所属的哪个序数组.

order所有弹性项的初始值为0.

另请参阅orderCSS网格布局规范.

使用flex order属性创建的"previous sibling selectors"的示例.

.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相关问题的示例:

• 使用选择器在CSS中选择元素的前一个兄弟
• CSS:选择以前的兄弟姐妹
• CSS选择以前的兄弟姐妹
• CSS中的上一个相邻选择器
• 在悬停时选择以前的兄弟姐妹
• 获得前面兄弟的CSS选择器
• 使用CSS更改悬停时兄弟元素的颜色
• 如何使用selenium css语法选择以前的兄弟
• CSS Selector用于选择另一个元素之前的元素？
• 如何仅使用CSS将样式添加到活动输入的上一个兄弟
• 下一个和前一个元素的CSS选择器
• 当div悬停时如何影响其他元素

如上所述,这种看法并不完全正确.可以使用flex order属性在CSS中模拟先前的兄弟选择器.

在z-index神话

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

事实上,该规范的最新版本--W3C编辑的草案 - 仍然断言这是真的:

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

z-index

• 价值:汽车| | 继承
• 初始:自动
• 适用于:定位元素
• 继承:没有
• 百分比:N/A.
• 媒体:视觉
• 计算值:如指定的那样

_{(重点补充)}

但实际上,这些信息已经过时且不准确.

作为弹性项目或网格项目的元素即使在何时position也可以创建堆叠上下文static.

4.3.Flex项目Z-Ordering

柔性物品油漆完全一样内嵌块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index其它值比auto创建一个堆叠内容即使position是static.

5.4.Z轴订购:z-index属性

的网格项目的绘制顺序是完全一样的内联块,不同之处在于为了改性文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使 position是static.

以下是z-index处理非定位弹性项目的演示:https://jsfiddle.net/m0wddwxs/

Answer 5

我有同样的问题,但后来我有一个"呃"的时刻.而不是写作

x ~ y

写

y ~ x

显然这匹配"x"而不是"y",但它回答"有匹配吗？" 问题,简单的DOM遍历可能比在javascript中循环更有效地使您获得正确的元素.

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

Answer 6

两招.基本上反转HTML中所需元素的HTML顺序并使用
~ Next兄弟运算符:

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>

Answer 7

没有“前一个选择器”，但您可以使用: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 或使用相反的顺序更直接。

Answer 8

+是为了下一个兄弟姐妹.以前的兄弟姐妹是否有同等效力？

你可以使用两个斧头选择器:!和?

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

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

在传统的CSS中,没有先前的兄弟选择器.

但是,在ax 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>

Answer 9

2023年情况发生了变化，现在有了这样的选择器：

    // 1 item before
    :has(+ .item:hover) {
        ...
    }

如果您之前想选择 3 个项目，请执行以下操作：

    // 3 items before
    :has(+ .item:hover),
    :has(+ .item + .item:hover),
    :has(+ .item + .item + .item:hover) {
        ...
    }

在这里查看我的演示https://codepen.io/ro31337/pen/YzJbEZv

Answer 10

另一个flexbox解决方案

您可以使用HTML中的元素顺序.然后除了order在Michael_B的答案中使用,您可以使用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>

Answer 11

目前没有正式的方法可以做到这一点,但你可以使用一个小技巧来实现这一目标!请记住它是实验性的并且有一些限制......(如果您担心导航器兼容性,请查看此链接)

你可以做的是使用CSS3选择器:伪classe调用 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>

限制

• 您无法根据下一个元素的类选择以前的元素
• 伪类也是如此

Answer 12

我的要求是在 @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>

Answer 13

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

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>

Answer 14

你可以使用双重否定

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

替换SELECTOR为TAGor .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) {}

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

/* 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) {}

Answer 15

如果您知道确切的位置，:nth-child()则可以基于 - 排除所有后续兄弟姐妹。

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

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

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

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

其作用相同。

Answer 16

不可以。通过 CSS 是不可能的。它需要记住“级联”;-)。

但是，如果您能够将JavaScript添加到您的页面，那么一点点jQuery可以帮助您实现最终目标。
您可以使用 jQueryfind对您的目标元素/类/id 执行“前瞻”，然后回溯以选择您的目标。
然后您使用 jQuery 为您的元素重新编写 DOM (CSS)。

根据Mike Brant 的这个答案，以下 jQuery 代码段可能会有所帮助。

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

这首先选择<ul>紧跟在 a 之后的所有s <p>。
然后它“回溯”以<p>从该组<ul>s 中选择所有先前的s。

实际上，已通过 jQuery 选择了“上一个兄弟”。
现在，使用该.css函数为该元素传入 CSS 新值。

就我而言，我正在寻找一种方法来选择具有 id 的 DIV #full-width，但前提是它具有.companies.

我可以控制 下的所有 HTML .companies，但无法更改它上面的任何 HTML。
级联只向 1 个方向进行：向下。

因此我可以选择 ALL #full-width。
或者我可以选择.companies只跟在#full-width.
但我不能只选择#full-widths进行 .companies。

而且，我再次无法.companies在 HTML 中添加任何更高的内容。HTML 的那部分是在外部编写的，并包装了我们的代码。

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

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

这将查找所有#full-width .companies，并仅选择那些.companies，类似于如何使用选择器来定位 CSS 标准中的特定元素。
然后它用于.parents“回溯”并选择 的所有父项.companies，
但过滤这些结果以仅保留#fill-width元素，因此最终，
它仅选择#full-width具有.companies类后代的元素。
最后，它为width结果元素分配一个新的 CSS ( ) 值。

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

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

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

jQuery 参考文档：
$()或 jQuery()：DOM 元素。
. find：获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。
. parent：获取匹配元素集中每个元素的前一个兄弟元素。如果提供了选择器，则仅当它与该选择器匹配时才检索前一个同级（过滤结果以仅包含列出的元素/选择器）。
. css：为一组匹配的元素设置一个或多个 CSS 属性。