加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
目前还没有正式的方法来做到这一点,但你可以使用一个小技巧来实现这一点!请记住,它是实验性的,并且有一些限制。。。(如果您担心导航器兼容性,请检查此链接)
您可以做的是使用CSS3选择器:名为nth-child()的伪类
#列表>*{显示:内联块;填充:20px 28px;右边距:5px;边框:1px实心#bbb;背景:#ddd;颜色:#444;边距:0.4em 0;}#列表:第n个子项(-n+4){颜色:#600b90;边框:1px红色虚线;背景:橙色;}<p>orange元素是使用li:nth child(-n+4)选择的上一个同级li</p><div id=“list”><span>1</span><!--将选择--><p>2</p><!--将选择--><p>3</p><!--将选择--><div>4</div><!--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>
局限性
不能基于下一个元素的类选择上一个元素伪类也是如此
其他回答
可以按如下方式使用:has()。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
虽然没有以前的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()
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
我解决了这个问题,将元素放在一个柔性框中,然后使用flex direction:column reverse。
然后,我不得不手动反转HTML中的元素(以相反的顺序排列),这看起来很正常,而且很有效!
<div style="display: flex; flex-direction: column-reverse">
<a class="element2">Element 2</a>
<a class="element1">Element 1</a>
</div>
...
<style>
.element2:hover + element1 {
...
}
</style>
我也有同样的问题,但后来我有了“嘘”的一刻。而不是写作
x ~ y
写
y ~ x
显然,这与“x”而不是“y”匹配,但它回答了“有匹配吗?”的问题,简单的DOM遍历可能会比javascript中的循环更有效地找到正确的元素。
我意识到最初的问题是一个CSS问题,所以这个答案可能完全不相关,但其他Javascript用户可能会像我一样通过搜索发现这个问题。