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

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


当前回答

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

您可以做的是使用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用户可能会像我一样通过搜索发现这个问题。