加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作
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>