加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

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

Node.previousSibling节点

其他回答

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

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

/*默认链接颜色为蓝色*/.父级a{颜色:蓝色;}/*上一个兄弟姐妹应该是红色的*/.parent:悬停{颜色:红色;}.父项a:悬停,.父a:悬停~a{颜色:蓝色;}<div class=“parent”><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a><a href=“#”>链接</a></div>

我遇到了一个类似的问题,发现所有这类问题都可以通过以下方式解决:

给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。

这样,您就可以设置当前项、先前项(所有项都被当前项和下一项覆盖)以及下一项的样式。

例子:

/* 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选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:

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

在JavaScript中,只需执行以下操作:

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

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

如果您使用jQuery,只需执行以下操作:

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

+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹

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

传统CSS中有两个后续的同级选择器:

+是紧接其后的同级选择器~是任何后续的同级选择器

在传统的CSS中,没有以前的同级选择器。

然而,在axe CSS后处理器库中,有两个先前的同级选择器:

? 是前一个同级选择器(与+相反)! 是之前的任何同级选择器(与~相反)

工作示例:

在以下示例中:

.any后续:hover~div选择任何后续div立即后续:hover+div选择立即后续div.任何以前的:悬停!div选择之前的任何div.上一个:悬停?div选择上一个div

第二部分{显示:内联块;宽度:60px;高度:100px;颜色:rgb(255、255、255);背景色:rgb(255,0,0);文本对齐:居中;垂直对齐:顶部;光标:指针;不透明度:0;过渡:不透明度0.6s缓和;}代码{显示:块;边距:4px;字体大小:24px;线条高度:24px;背景色:rgba(0、0、0和0.5);}div:第n个类型(-n+4){背景色:rgb(0,0,255);}div:第n种类型(n+3):第n个类型(-n+6){不透明度:1;}.any后续:hover~div,.紧随其后:hover+div,.任何以前的:悬停!div中,.上一个:悬停?第二部分{不透明度:1;}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div><div class=“immediate previor”>悬停<code></代码>选择器</div><div class=“any previous”>悬停<code></代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

不,没有“上一个同级”选择器。

在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。