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

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


当前回答

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“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}

其他回答

不,没有“上一个同级”选择器。

在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。

请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。

在悬停时覆盖下一个同级的样式,这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色:红色;}ul:悬停li{颜色:蓝色;}ul:悬停li:悬停~li{颜色:红色;}<ul><li>项目1</li><li>项目2</li><li>项目3</li></ul>

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

.thePrevious:has(+ .theNextSibling)

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

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

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

假设我们有:

<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元素(或其他标签)的链接。

我解决了这个问题,将元素放在一个柔性框中,然后使用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>