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

Question

加号（+）适用于下一个兄弟。是否有以前兄弟姐妹的等价物？

Answer 1

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

在相关的注释中，~用于一般继承兄弟（意思是元素在此之后，但不一定紧接在之后）并且是CSS3选择器。 +用于下一个兄弟，是CSS2.1。

请参阅Adjacent sibling combinator中的Selectors Level 3和5.7 Adjacent sibling selectors中的Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification。

Answer 2

我找到了一种方法来塑造所有以前的兄弟姐妹（~的对面），这可能会根据你的需要而有效。

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

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

Selectors level 4 introduces :has()（以前是主题指标!），可让您选择以前的兄弟姐妹：

previous:has(+ next) {}

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

Answer 4

考虑flex和网格布局的order属性。

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

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

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

以下是一个例子：

  

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

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

STEPS

1. 将ul设为弹性容器。
   
   

   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>

来自flexbox规范：

  

5.4. Display Order: the order property

     

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

     

order属性通过将弹性项目分配给序列组来控制弹性项目在弹性容器中的显示顺序。它需要一个<integer>值，它指定flex项的哪个序数组   属于。

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

另见order in the CSS Grid Layout spec。

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

.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的长期信念。

一个这样的信念是a previous sibling selector is not possible in CSS。

说这种观点是普遍的，这是轻描淡写的。以下是Stack Overflow的相关问题示例：

• Select the preceding sibling of an element in CSS using selectors
• CSS: select previous sibling
• CSS select previous sibling
• Previous adjacent selector in CSS
• Select previous siblings on hover
• CSS selector to get preceding sibling
• Change color of sibling elements on hover using CSS
• How to select the previous sibling using selenium css syntax
• CSS Selector for selecting an element that comes BEFORE another element?
• How to add styling to active input's previous sibling using CSS only
• CSS selector for next and previous elements
• How to affect other elements when a div is hovered

如上所述，这种看法并不完全正确。可以使用flex order属性在CSS中模拟先前的兄弟选择器。

z-index神话

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

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

  

9.9.1 Specifying the stack level: the z-index property

     

<强> z-index

     

  
• 价值：自动| |继承
  
• 初始：自动
  
• 适用于：定位元素
  
• 继承：否
  
• 百分比：N / A
  
• 媒体：视觉
  
• 计算值：指定
  

     

_{（强调添加）}

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

即使position为static，flex items或grid items元素也可以创建堆叠上下文。

  

4.3. Flex Item Z-Ordering

     

Flex项目绘制与内联块完全相同，除了使用订单修改的文档顺序代替raw   文档顺序以及z-index以外的auto值即使position为static也会创建堆叠上下文。

     

5.4. Z-axis Ordering: the z-index property

     

网格项的绘制顺序与内联块完全相同，但订单修改的文档顺序除外   用于代替原始文档订单，z-index以外的auto值创建堆叠上下文，即使   position是static。

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

Answer 5

两个技巧。基本上反转HTML中所需元素的HTML顺序并使用
~ 下一个兄弟运营商：

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 6

  

+适用于下一个兄弟姐妹。有没有与前一个相同的   同级？

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

传统CSS中有 2 后续兄弟选择器：

• +是直接后续兄弟选择器
• ~是任何后续兄弟选择器

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

但是，在 ax CSS后处理器库中，有 2 以前的兄弟选择器：< / p>

• ?是直接上一个兄弟选择器（与+相对）
• !是任何上一个兄弟选择器（与~相对）

工作示例：

在下面的例子中：

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

另一个flexbox解决方案

您可以使用HTML中的元素顺序。然后，除了在Michael_B's answer中使用order之外，您还可以使用flex-direction: row-reverse;或flex-direction: column-reverse;，具体取决于您的布局。

工作样本：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

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

你可以做的是使用CSS3选择器：名为nth-child()

的伪classe

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

限制

• 您无法根据下一个元素的类
选择以前的元素
• 伪类
也是如此

Answer 9

没有“前一个选择器”，但您可以使用 :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 10

你可以使用双重否定

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

将 SELECTOR 替换为 TAG 或 .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 11

如果你知道确切的位置，那么基于:nth-child()的所有兄弟姐妹的排除都会有效。

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

哪个会在第3个之前选择所有li（例如第1个和第2个）。但是，在我看来，这看起来很丑陋并且使用非常紧张。

你也可以从右到左选择第n个孩子：

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

其中也是如此。

Answer 12

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

在我的情况下，我想要一个主要的CSS 5星评级系统。我需要为之前的星星着色（或交换图标）。通过将每个元素向右浮动，我基本上可以获得相同的效果（星星的html因此必须写成'向后'）。

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

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 13

没有，有。

如果必须将 label 放置在 input 之前，只需将 label 放置在 input 之后，并保持 div 内的 label 和 input 并设置 div 的样式strong> 如下：

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

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

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 16

不要认为这里有类似的答案，所以请尝试此。假设HTML：

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

为所有子项添加样式，然后将样式撤消至目标，并为目标项的子项添加兄弟

。

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

Answer 17

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

说我们有：

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

不。无法通过CSS。它深深地吸引了“级联”；-）。

---

但是，如果您能够在页面中添加 JavaScript ，那么一些 jQuery 可以使您达到最终目标。
您可以使用jQuery的find对目标元素/类/ id执行“前瞻”，然后回溯以选择目标。
然后，您使用jQuery重新编写元素的DOM（CSS）。

基于this answer by Mike Brant， 以下jQuery代码段可能会有所帮助。

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

此操作首先选择紧随<ul>之后的所有<p>。
然后，它“回溯”以从该组<p>中选择所有先前的<ul>。

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

---

在我的情况下，我正在寻找一种选择ID为#full-width的DIV的方法，但是仅当它具有一个.companies类的（间接）后代DIV时。

我可以控制.companies下的所有HTML，但是无法更改其上方的任何HTML。
而且级联仅向1个方向：向下。

因此，我可以选择所有#full-width个。
或者，我可以选择仅跟随.companies的{​​{1}}。
但是我不能不能只选择进行 #full-width的{​​{1}}。

同样，我无法在HTML的更高处添加#full-width。 HTML的那部分是外部编写的，并包装了我们的代码。

但是使用jQuery，我可以选择所需的.companies，然后分配适当的样式：

.companies

这将找到所有#full-width，并仅选择$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" ); ，这与使用选择器定位CSS标准中的特定元素的方式类似。
然后，它使用#full-width .companies进行“回溯”并选择.companies的所有父级，
但过滤这些结果以仅保留.parents个元素，以便最后，
只有具有.companies类后代的元素，它才会选择#fill-width元素。
最后，它将为结果元素分配一个新的CSS（#full-width）值。

.companies

width

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

jQuery参考文档：
$() or jQuery()：DOM元素。
.find：获取当前匹配元素集中每个元素的后代，并通过选择器，jQuery对象或元素进行过滤。
.parents：获取匹配元素集中每个元素的前一个同级。如果提供了选择器，则仅当与该选择器匹配时才检索前一个同级（将结果筛选为仅包括列出的元素/选择器）。
.css：为匹配的元素集设置一个或多个CSS属性。

Answer 19

我需要一个解决方案来选择之前的同级tr。我使用React和Styled-components提出了这个解决方案。这不是我的确切解决方案（这是几个小时后从内存中获取的）。我知道setHighlighterRow函数存在缺陷。

OnMouseOver行将把行索引设置为state，并用新的背景色重新呈现上一行

  props: {
    propsTitle: String, 
    propsLevel: Number,
    propsProgress: Number,
  },

  data() {
    console.log(this)
    return { 
      title: this.propsTitle,
      progress: this.propsProgress,
      level: this.propsLevel,
      activeBtnTxt: "Start",
      isStarted: false
    }
  },

Answer 20

这是我使用jQuery所使用的

    $('.child-selector').hover( function() {
        $(this).prev().addClass('hovered');
        $(this).addClass('hovered');
        $(this).next().removeClass('hovered');
    });

这是如何获得工作代码的方法：

Answer 21

这是类似问题的链接

CSS select all previous siblings for a star rating

因此，我使用每个人的反馈来发布我的解决方案，任何人都可以将其用作参考并可能建议改进。

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

我遇到了同样的问题，当我尝试更改输入焦点上的前置图标填充颜色时，我的代码如下所示：

<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 slot 来注入前置，所以即使我改变位置仍然在输入后呈现

好吧，我的解决方案是滑动它们的位置，并添加自定义前置和使用的 ~ 符号，因为 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" />

Scss 样式

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

所以只是尝试改变它的位置，如果有必要使用css order 或 position: absolute;实现您想要的，并避免使用 javascript 来满足此类需求。

Answer 23

没有这样的选择器，但在 DOM api 中有非常只读的属性

Node.previousSibling

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

Answer 24

您可以重新排列html，将容器设置为flex或grid，还可以为每个孩子设置“ order”属性，以便其看起来像您想要的