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

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


当前回答

根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。

假设我们有:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做什么来使用间距使袜子块(包括袜子颜色)在视觉上突出?

什么会很好,但不存在:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在的内容:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这将所有锚链接设置为顶部有15px的边距,并将其重置为0,以用于LI中没有UL元素(或其他标签)的链接。

其他回答

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

Node.previousSibling节点

对于我的用例,需要更改焦点上的先前元素样式,并且悬停在父元素中只有两个项。为此,使用了:focuswithin和:hover伪类。

无论何时发生聚焦/悬停事件,都可以选择

.root元素:悬停.element到样式{background color:red;}.root元素:将焦点放在.element中,以设置样式{background color:green;}<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>

如果您知道确切的位置,那么基于:nth-child()的排除以下所有兄弟姐妹将起作用。

ul li:not(:nth-child(n+3))

这将选择第三个之前的所有lis(例如第一个和第二个)。但是,在我看来,这看起来很难看,而且用例非常紧凑。

您还可以从右到左选择第n个子项:

ul li:nth-child(-n+2)

这也是一样的。

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

x ~ y

y ~ x

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

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

可以按如下方式使用:has()。

.thePrevious:has(+ .theNextSibling)

我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }