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

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


当前回答

我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作

x ~ y

y ~ x

显然,这与“x”而不是“y”匹配,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。

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

其他回答

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

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

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

例子:

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

希望这对某人有所帮助。

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

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

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

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

.父级{显示:柔性;弯曲方向:行反转;}

现在您可以这样选择它们。.sibling_1:悬停~.sibling_2{#您的CSS}

另一种flexbox解决方案

您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外,还可以使用灵活的方向:行反转;或弯曲方向:列反转;这取决于您的布局。

工作样本:

.flex弯曲{显示:柔性;弯曲方向:行反转;/*在“反转”结尾(即开头)对齐内容*/调整内容:柔性端;}/*在悬停目标上,其“先前”元素*/.flex项:悬停~.flex项{背景色:石灰;}/*仅用于演示的样式*/.flex项目{背景色:橙色;颜色:白色;填充:20px;字体大小:3rem;边界半径: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>

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

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

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

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

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

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