css - 是否有“前一个兄弟”选择器？

Question

加号 ( +) 用于选择下一个兄弟。

是否有前一个兄弟姐妹的等价物？

Answer 1

不，没有“前一个兄弟”选择器。

在相关的说明中，~是针对一般后继兄弟（意味着元素在此之后，但不一定紧随其后）并且是 CSS3 选择器。+是下一个兄弟姐妹，是 CSS2.1。

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

Answer 2

我找到了一种方法来设置所有以前的兄弟姐妹（相反的~）的样式，这可能取决于您的需要。

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

/* 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 3

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

previous:has(+ next) {}

…但在撰写本文时，浏览器支持实际上是不存在的。

Answer 4

考虑orderflex 和 grid 布局的属性。

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

---

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

特别是， flexorder属性可以在屏幕上移动元素。

这是一个例子：

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

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

脚步

1. 制作ul一个弹性容器。
   
   

   ul { display: flex; }
   

---

2. 颠倒标记中同级的顺序。
   
   

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

---

3. 使用同级选择器来定位元素 A（~或+将做）。
   
   

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

---

4. 使用 flexorder属性来恢复视觉显示上的兄弟姐妹的顺序。
   
   

   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>

来自 flexbox 规范：

5.4. 显示顺序：order属性

默认情况下，Flex 项目的显示和布局顺序与它们在源文档中的显示顺序相同。该 order属性可用于更改此排序。

该order属性通过将弹性项目分配给序数组来控制弹性项目在弹性容器中出现的顺序。它采用单个<integer>值，指定弹性项目所属的序数组。

所有弹性项目的初始order值为 0。

另请参阅orderCSS 网格布局规范。

---

order使用 flex属性创建的“前一个兄弟选择器”示例。

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

<p>
Using the flex <code>order</code> property to construct a previous sibling selector
</p>

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box5"><span>HOVER ME</span></div>
    <div class="box box4"><span>4</span></div>
</div>

<br>

<div class="container">
    <div class="box box9"><span>HOVER ME</span></div>
    <div class="box box12"><span>HOVER ME</span></div>
    <div class="box box6"><span>6</span></div>
    <div class="box box7"><span>7</span></div>
    <div class="box box8"><span>8</span></div>
    <div class="box box10"><span>10</span></div>
    <div class="box box11"><span>11</span></div>
</div>

<br>

<div class="container">
    <div class="box box21"><span>HOVER ME</span></div>
    <div class="box box13"><span>13</span></div>
    <div class="box box14"><span>14</span></div>
    <div class="box box15"><span>15</span></div>
    <div class="box box16"><span>16</span></div>
    <div class="box box17"><span>17</span></div>
    <div class="box box18"><span>18</span></div>
    <div class="box box19"><span>19</span></div>
    <div class="box box20"><span>20</span></div>
</div>

jsFiddle

---

旁注——关于 CSS 的两个过时的信念

Flexbox 正在打破长期以来对 CSS 的看法。

一个这样的信念是在 CSS 中不可能有以前的兄弟选择器。

说这种信念是普遍存在的将是轻描淡写。以下是有关 Stack Overflow 的相关问题示例：

• 使用选择器在 CSS 中选择元素的前一个兄弟
• CSS：选择上一个兄弟
• CSS选择上一个兄弟
• CSS中的上一个相邻选择器
• 在悬停时选择以前的兄弟姐妹
• CSS选择器获取前面的兄弟
• 使用 CSS 更改悬停时兄弟元素的颜色
• 如何使用 selenium css 语法选择前一个兄弟
• CSS选择器用于选择另一个元素之前的元素？
• 如何仅使用 CSS 将样式添加到活动输入的前一个兄弟姐妹
• 下一个和上一个元素的 CSS 选择器
• div悬停时如何影响其他元素

如上所述，这种信念并不完全正确。可以使用 flexorder属性在 CSS 中模拟以前的同级选择器。

z-index神话_

另一个长期存在的信念是z-index仅适用于定位元素。

事实上，该规范的最新版本——W3C Editor's Draft——仍然断言这是真的：

9.9.1 指定堆栈级别：z-index 属性

z-index

• 值：自动 | | 继承
• 初始：自动
• 适用于：定位元素
• 继承：无
• 百分比：不适用
• 媒体：视觉
• 计算值：指定

_{（重点补充）}

然而，实际上，这些信息已经过时且不准确。

即使是flex 项或网格项的元素也可以创建堆叠上下文。positionstatic

4.3. 弹性项目 Z 排序

Flex 项目的绘制与内联块完全相同，除了使用 order-modified 文档 order 代替原始文档 order，以及创建 stacking contextz-index以外的值，auto即使positionis static。

5.4. Z轴排序：z-index属性

网格项目的绘制顺序与内联块完全相同，除了使用 order-modified 文档 order 代替原始文档 order，以及创建 stacking contextz-index以外的值，auto即使 positionis static。

z-index这是处理非定位弹性项目的演示： https ://jsfiddle.net/m0wddwxs/

Answer 5

我有同样的问题，但后来我有一个“呃”的时刻。而不是写

x ~ y

写

y ~ x

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

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

Answer 6

没有“前一个选择器”，但您可以使用:not和~（“后选择器”）的组合。没有逆序，没有javascript。

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}

<div class="parent">
  <a href="">link</a>
  <a href="">link</a>
  <a href="" class="active">link</a>
  <a href="">link</a>
  <a href="">link</a>
</div>

我认为我的方法比“设置所有 div 的样式，而不是删除后 div 的样式”、使用 javascript 或使用相反的顺序更直接。

Answer 7

+是给下一个兄弟姐妹的。是否有前一个兄弟姐妹的等价物？

您可以使用两个斧头选择器：!和?

常规 CSS 中有2 个后续的兄弟选择器：

• +是紧随其后的兄弟选择器
• ~是任何后续的兄弟选择器

在传统的 CSS 中，没有先前的兄弟选择器。

但是，在ax CSS 后处理器库中，有2 个先前的同级选择器：

• ?是前一个兄弟选择器（与 的相反+）
• !是任何先前的同级选择器（与 的相反~）

工作示例：

在下面的示例中：

• .any-subsequent:hover ~ div选择任何后续div
• .immediate-subsequent:hover + div选择紧随其后的div
• .any-previous:hover ! div选择任何以前的div
• .immediate-previous:hover ? div选择前一个div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Answer 8

两招。基本上在 HTML 中反转所需元素的 HTML 顺序并使用
~ Next 兄弟运算符：

float-right +反转 HTML 元素的顺序

div{ /* Do with the parent whatever you know just to make the
  inner float-right elements appear where desired */
  display:inline-block;
}
span{
  float:right;  /* float-right the elements! */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:red;
} 

<div>
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

---

父direction: rtl;级 + 反转内部元素的顺序

.inverse{
  direction: rtl;
  display: inline-block; /* inline-block to keep parent at the left of window */
}
span:hover ~ span{ /* On hover target it's "previous";) elements */
  background:gold;
}

Hover one span and see the previous elements being targeted!<br>

<div class="inverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

Answer 9

Another flexbox solution

You can use inverse the order of elements in HTML. Then besides using order as in Michael_B's answer you can use flex-direction: row-reverse; or flex-direction: column-reverse; depending on your layout.

Working sample:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

Answer 10

目前没有官方方法可以做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制......（如果您担心导航器兼容性，请查看此链接）

您可以做的是使用 CSS3 选择器：伪类称为nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

限制

• 您不能根据下一个元素的类选择上一个元素
• 这对于伪类也是一样的

Answer 11

你可以使用双重否定

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

替换SELECTOR为TAGor .CLASS（使用#ID可能太具体了）。替换FILTER为其他一些:PSUEDO-SELECTOR（我只尝试过:hover）或.CLASS（更多用于通过 Javascript 切换）。

由于典型用法可能依赖于悬停（参见下面的示例）

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}

<div class="parent">
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
 </div>

Answer 12

不，这是不可能通过 CSS 实现的。它将“级联”牢记在心;-)。

---

但是，如果您能够将JavaScript添加到您的页面，那么一点点jQuery就可以帮助您实现最终目标。
您可以使用 jQueryfind对您的目标元素/类/id 执行“前瞻”，然后回溯以选择您的目标。
然后，您使用 jQuery 为您的元素重新编写 DOM (CSS)。

基于Mike Brant 的这个回答，下面的 jQuery 片段可能会有所帮助。

$('p + ul').prev('p')

这首先选择<ul>紧跟在 a 之后的所有 s <p>。然后它“回溯”以从那组s
中选择所有以前的s。<p><ul>

实际上，已通过 jQuery 选择了“前一个兄弟姐妹”。
现在，使用该.css函数为该元素传入您的 CSS 新值。

---

就我而言，我正在寻找一种方法来选择具有 id 的 DIV #full-width，但前提是它具有类的（间接）后代 DIV .companies。

我可以控制 下的所有 HTML .companies，但无法更改它上面的任何 HTML。
级联只有一个方向：向下。

因此我可以选择 ALL #full-width。
或者我可以选择.companies只跟在#full-width.
但我不能只选择继续进行#full-width的 s 。 .companies

而且，我无法.companies在 HTML 中添加任何更高的内容。HTML 的那部分是在外部编写的，并包装了我们的代码。

但是使用 jQuery，我可以选择所需#full-width的 s，然后分配适当的样式：

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

这会找到 all#full-width .companies并只选择那些.companies，类似于如何使用选择器来定位 CSS 标准中的特定元素。
然后它使用.parents“回溯”并选择 的所有父项.companies，
但过滤这些结果以仅保留#fill-width元素，以便最后
只选择#full-width具有.companies类后代的元素。最后，它为结果元素
分配一个新的 CSS ( ) 值。width

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

jQuery 参考文档：
$()或 jQuery()：DOM 元素。
. find：获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。
. parents：获取匹配元素集中每个元素的前一个兄弟元素。如果提供了选择器，则仅当它与该选择器匹配时才检索前一个兄弟（过滤结果以仅包含列出的元素/选择器）。
. css：为一组匹配的元素设置一个或多个 CSS 属性。

Answer 13

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

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

这将选择li第 3 个之前的所有 s（例如第 1 个和第 2 个）。但是，在我看来，这看起来很难看，而且用例非常紧凑。

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

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

哪个也一样。

Answer 14

在悬停时覆盖下一个兄弟姐妹的样式，以便看起来只有以前的兄弟姐妹在悬停时添加了样式。

ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Answer 15

根据您的确切目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性（即使存在父选择器）......

假设我们有：

<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>

我们可以做些什么来使用间距使 Socks 块（包括袜子颜色）在视觉上突出？

什么会很好但不存在：

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

Answer 16

/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

Answer 17

不幸的是，没有“以前的”同级选择器，但您仍然可以通过使用定位（例如向右浮动）获得相同的效果。这取决于你想要做什么。

就我而言，我想要一个主要是 CSS 5 星评级系统。我需要为以前的星星着色（或交换图标）。通过向右浮动每个元素，我基本上得到了相同的效果（因此，星星的 html 必须写为“向后”）。

我在这个例子中使用 FontAwesome 并在 fa-star-o 和 fa-star http://fortawesome.github.io/Font-Awesome/的 unicodes 之间交换

CSS：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

JSFiddle：http: //jsfiddle.net/andrewleyva/88j0105g/

Answer 18

没有，还有。

如果必须将标签放在输入之前，只需将标签放在输入之后，并将标签和输入都保留在div中，并将div设置为以下样式：

.input-box {
  display: flex;
  flex-direction: column-reverse;
}

<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

现在您可以应用 css 中可用的标准下一个兄弟样式选项，并且看起来您正在使用以前的兄弟样式。

Answer 19

我需要一个解决方案来选择前一个兄弟 tr。我使用 React 和 Styled-components 提出了这个解决方案。这不是我的确切解决方案（这是几个小时后的记忆）。我知道 setHighlighterRow 函数存在缺陷。

OnMouseOver 一行会将行索引设置为状态，并使用新的背景颜色重新渲染上一行

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

Answer 20

没有这样的选择器，但是在 DOM API 中有一个漂亮的只读属性

Node.previousSibling

Answer 21

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

假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”：

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

由于没有先前的元素选择器，您可以简单地切换“sibling_1”和“sibling_2”并应用，因此它们看起来相同。

.parent {
  display: flex;
  flex-direction: row-reverse;
}

现在您可以像这样选择它们。

.sibling_1:hover ~ .sibling_2 {
  #your CSS
}

Answer 22

我有一个类似的问题，发现所有这种性质的问题都可以解决如下：

1. 给你所有的物品一个风格。
2. 给你选择的项目一个风格。
3. 使用 + 或 ~ 为下一个项目指定样式。

这样，您就可以设置当前、以前的项目（所有项目都被当前和下一个项目覆盖）和下一个项目的样式。

例子：

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望它可以帮助某人。

Answer 23

对于我的用例，需要在焦点上更改以前的元素样式并悬停在父元素中只有 2 个项目。这样做使用:focus-within和:hover伪类。

就像这样在发生焦点/悬停事件时选择

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;} 

<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

Answer 24

这是类似问题的链接

CSS 选择所有以前的兄弟姐妹进行星级评分

因此，我使用每个人的回复发布我的解决方案，任何人都可以将其用作参考并可能推荐改进。

// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};

.star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}

<div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

Answer 25

我遇到了同样的问题，当我尝试更改输入焦点上的前置图标填充颜色时，我的代码看起来像这样：

<template #append>
    <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
</template>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

问题是我正在使用vue-bootstrap 插槽来注入前置，所以即使我更改位置仍然会在输入后呈现

好吧，我的解决方案是滑动他们的位置，并添加自定义前置和使用 ~ 符号，因为 css 不支持以前的兄弟姐妹。

<div class="form-input-prepend">
    <svg-vue icon="common.lock" />
</div>
<b-form-input id="password_confirmation" v-model="form.password_confirmation" type="password" placeholder="Repeat password" autocomplete="new-password" />

样式

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

所以只要尝试改变它的位置，必要时使用 css order或position: absolute; 实现你想要的，并避免使用 javascript 来满足这种需求。

Answer 26

我通过将我的元素放在一个 flexbox 中然后使用 flex-direction: flex-reverse 来解决这个问题。

然后我不得不手动反转 HTML 中的元素（以相反的顺序放置它们），它看起来很正常并且有效！

<div style="display: flex; flex-direction: flex-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>