是否有“以前的兄弟”CSS选择器？

Question

是否有“以前的兄弟”CSS选择器？加号（+）用于下一个兄弟。以前的兄弟姐妹是否有同等效力？

Answer 1

我找到了一种方法来塑造所有以前的兄弟姐妹（相反~），这取决于你需要什么。

假设您有一个链接列表，当悬停在一个链接上时，所有以前的链接都应该变为红色。你可以这样做：

/* default link color is blue */

.parent a {

  color: blue;

}

/* prev siblings should be red */

.parent:hover a {

  color: red;

}

.parent a:hover,

.parent a:hover ~ a {

  color: blue;

}

<div class="parent">

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

  <a href="#">link</a>

</div>

Answer 2

选择器级别4引入:has()（以前是主题指示符!），这将允许您选择以前的兄弟：

previous:has(+ next) {}

...但在撰写本文时，浏览器支持已超出前沿。

Answer 3

考虑orderflex和网格布局的属性。

我将在下面的示例中关注flexbox，但相同的概念适用于Grid。

---

使用flexbox，可以模拟先前的兄弟选择器。

特别是，flex order属性可以在屏幕周围移动元素。

这是一个例子：

当元素B悬停时，您希望元素A变为红色。

<ul>
    <li>A</li>
    <li>B</li></ul>

脚步

1. 制作ul一个flex容器。
   
   

   ul { display: flex; }

---

1. 在标记中反转兄弟姐妹的顺序。
   
   

   <ul>
      <li>B</li>
      <li>A</li></ul>

---

1. 使用兄弟选择器来定位元素A（~或+将执行）。
   
   

   li:hover + li { background-color: red; }

---

1. 使用flex order属性可以恢复可视显示中兄弟节点的顺序。
   
   

   li:last-child { order: -1; }

---

......瞧！先前的兄弟选择器诞生（或至少模拟）。

这是完整的代码：

ul {

    display: flex;

}

li:hover + li {

    background-color: red;

}

li:last-child {

    order: -1;

}

/* non-essential decorative styles */

li {

    height: 200px;

    width: 200px;

    background-color: aqua;

    margin: 5px;

    list-style-type: none;

    cursor: pointer;

}

<ul>

    <li>B</li>

    <li>A</li>

</ul>