加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。
假设我们有:
<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;
}