Znalazłem sposób na stylizację wszystkich poprzednich rodzeństw (przeciwieństwo ~), które mogą działać w zależności od tego, czego potrzebujesz.

Załóżmy, że masz listę linków i gdy najedziesz na jeden, wszystkie poprzednie powinny stać się czerwone. Możesz to zrobić tak:

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

Selektory poziom 4 wprowadza :has() (poprzednio wskaźnik subject !), który pozwoli Ci wybrać poprzednie rodzeństwo z:

previous:has(+ next) {}

... ale w momencie pisania, to jest pewien dystans poza krawędź krwawienia do obsługi przeglądarki.

Rozważ właściwość order układów flex I grid.

skupię się na flexbox w poniższych przykładach, ale te same pojęcia odnoszą się do Grid.

Dzięki flexbox można symulować poprzedni selektor rodzeństwa.

W szczególności właściwość flex order może przesuwać elementy po ekranie.

Oto przykład:

Chcesz, aby element A zmienił kolor na czerwony, gdy element B jest / align = "left" /

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

Kroki

1. Stwórz ul elastyczny Pojemnik.
   
   

   ul { display: flex; }
   

1. Odwróć kolejność rodzeństwa w marce.
   
   

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

1. Użyj selektora rodzeństwa, aby celować w Element a (~ lub +).
   
   

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

1. Użyj właściwości flex order, aby przywrócić porządek rodzeństwa na wizualizacji wyświetlacz.
   
   

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

...i voila! Rodzi się (lub przynajmniej symuluje) poprzedni selekcjoner rodzeństwa.

Oto Pełny kod:

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>

Z flexbox spec:

5.4. Kolejność wyświetlania: właściwość order

Elementy Flex są domyślnie wyświetlane i układane w tej samej kolejności, w jakiej pojawiają się w dokumencie źródłowym. Na order własność może być używane do zmiany tego zamówienia.

Właściwość order kontroluje kolejność, w jakiej elementy flex pojawiają się w kontenerze flex, przypisując je do grup porządkowych. Pobiera pojedynczą wartość <integer>, która określa, która grupa porządkowa elementu flex należy do.

Początkowa wartość order dla wszystkich elementów flex wynosi 0.

Zobacz też order w specyfikacji CSS Grid Layout .

Przykłady "poprzednich selektorów" stworzonych z właściwość 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

A Side Note-dwa przestarzałe przekonania o CSS

Flexbox rozbija długo utrzymywane przekonania o CSS.

Jednym z takich przekonań jest to, że poprzedni selektor rodzeństwa nie jest możliwy w CSS.

• zaznaczenie poprzedzającego elementu w CSS za pomocą selektorów
• CSS: select previous sibling
• CSS select previous sibling
• Previous selector in CSS
• Wybierz poprzednie rodzeństwo na hover
• selektor CSS do pobrania
• Zmiana Koloru elementów rodzeństwa po najechaniu na kursor za pomocą CSS
• jak wybrać poprzednie rodzeństwo używając składni css selenium
• selektor CSS do wyboru elementu, który jest przed innym elementem?
• Jak dodać stylizację do poprzedniego rodzeństwa active input używając tylko CSS
• selektor CSS dla kolejnych i poprzednich elementów
• jak wpływać na inne elementy, gdy div jest zawieszony

Jak opisano powyżej, przekonanie to nie jest to prawda. Poprzedni selektor rodzeństwa może być symulowany w CSS przy użyciu właściwości flex order.

z-index Mit

Innym długotrwałym przekonaniem było to, że z-index działa tylko na elementach pozycjonowanych.

9.9.1 określanie poziomu stosu: the z-index nieruchomość

z-index

• Value: auto / / inherit
• Initial: auto
• dotyczy: elementów pozycjonowanych
• odziedziczony: nie
• Procent: Nie Dotyczy
• Media: visual
• obliczona wartość: jak określono

_{(podkreślenie dodane)}

W rzeczywistości jednak INFORMACJA Ta jest przestarzała i niedokładne.

Elementy, które są elementy flex lub elementy siatki może tworzyć konteksty układania nawet wtedy, gdy position jest static.

4.3. Flex Element Z-Zamawianie

Flex items maluje dokładnie tak samo jak bloki w wierszu, z tym wyjątkiem, że zamiast raw używany jest zmodyfikowany porządek dokumentu kolejność dokumentów i wartości z-index inne niż auto tworzą kontekst stosu, nawet jeśli position is static.

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

Kolejność malowania elementów siatki jest dokładnie taka sama jak w blokach liniowych, z tą różnicą, że kolejność dokumentów zmodyfikowanych według kolejności jest używane zamiast nieprzetworzonego porządku dokumentu, a wartości z-index inne niż auto tworzą kontekst stosu, nawet jeśli position jest static.

Oto demonstracja pracy z-index na niepozycjonowanych elementach flex: https://jsfiddle.net/m0wddwxs/

Miałem to samo pytanie, ale potem miałem moment "duh". Zamiast pisać

x ~ y

Napisz

y ~ x

Oczywiście pasuje do "x" zamiast "y" , ale odpowiada " czy jest dopasowanie?"question, i proste przejście DOM może dostać się do właściwego elementu bardziej efektywnie niż zapętlenie w javascript.

Zdaję sobie sprawę, że pierwotne pytanie było pytaniem CSS, więc ta odpowiedź jest prawdopodobnie całkowicie nieistotna, ale inni użytkownicy Javascript mogą natknąć się na pytanie poprzez Szukaj jak ja.

Dwa triki . Zasadniczo odwrócenie kolejności HTML pożądanych elementów w HTML i użycie
~ następne rodzeństwo operator:

float-right + odwrotność kolejności elementów 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>

Rodzic z direction: rtl; + Odwróć kolejność elementów wewnętrznych

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

+ jest dla następnego rodzeństwa. Czy istnieje odpowiednik dla poprzedniego rodzeństwo?

Możesz użyć dwóch selektorów axe : ! i ?

Są 2 kolejne selektory rodzeństwa w konwencjonalnym CSS:

• + jest natychmiastowym kolejnym selektorem rodzeństwa
• ~ jest dowolnym kolejnym selektorem rodzeństwa

W konwencjonalnym CSS nie ma poprzedni selektor rodzeństwa .

Jednak w axe CSS post-processor library, są 2 poprzednie selektory rodzeństwa:

• ? jest bezpośrednim poprzednim selektorem rodzeństwa (przeciwieństwem +)
• !jest dowolnym poprzednim selektorem rodzeństwa (przeciwieństwem ~)

Przykład Roboczy:

W poniższym przykładzie:

• .any-subsequent:hover ~ div wybiera kolejne div
• .immediate-subsequent:hover + div wybiera natychmiastowe następne div
• .any-previous:hover ! div wybiera poprzedni div
• .immediate-previous:hover ? div wybiera najbliższy poprzedni 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>

Inne rozwiązanie flexbox

Możesz użyć odwrotnej kolejności elementów w HTML. Następnie poza użyciem orderjak w odpowiedzi Michael_B możesz użyć flex-direction: row-reverse; lub flex-direction: column-reverse; w zależności od układu.

Próbka robocza:

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

W tej chwili nie ma oficjalnego sposobu, aby to zrobić, ale możesz użyć małej sztuczki, aby to osiągnąć ! Pamiętaj, że jest eksperymentalny i ma pewne ograniczenia ... (sprawdź ten link jeśli martwisz się o kompatybilność z nawigatorem)

Możesz użyć selektora CSS3: pseudo classe o nazwie 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>

Ograniczenia

• nie można wybrać poprzednich elementów na podstawie klas następnego elementy
• to samo dotyczy pseudo klas

Nie. Nie jest to możliwe poprzez CSS. Bierze "kaskadę" do serca ; -).

Jednak, jeśli jesteś w stanie dodać JavaScript do swojej strony, trochę jQuery może doprowadzić cię do celu końcowego.
Możesz użyć jQuery find, aby wykonać "look-ahead" na elemencie docelowym/class/id, a następnie cofnąć się, aby wybrać cel.
Następnie używasz jQuery, aby ponownie napisać DOM (CSS) dla Twojego elementu.

Na podstawie tej odpowiedzi Mike ' a Branta , na po jQuery snippet może pomóc.

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

To najpierw wybiera wszystkie <ul>, które bezpośrednio następują po <p>.
Następnie "Wstecz", aby wybrać wszystkie poprzednie <p> s z tego zestawu <ul> s.

Efektywnie, "poprzednie rodzeństwo" zostało wybrane przez jQuery.
Teraz Użyj funkcji .css, aby przekazać w CSS nowe wartości dla tego elementu.

W moim przypadku szukałem sposobu, aby wybrać DIV o id #full-width, ale tylko jeśli miał (pośredni) potomek DIV z klasą .companies.

Miałem kontrolę nad całym HTML pod .companies, ale nie mogłem zmienić żadnego z HTML nad nim.
A kaskada idzie tylko 1 Kierunek: w dół.

W ten sposób mogłem wybrać wszystkie #full-widths.
Albo Mogę wybrać .companies, które następowało tylko #full-width.
Ale mogę Nie wybrać tylko #full-widths że .companies.

I znowu nie mogłem dodać .companies wyżej w HTML. Ta część HTML była napisany zewnętrznie i zawinięty nasz kod.

Ale z jQuery, i można wybrać wymagane #full-widths, a następnie przypisać odpowiedni styl:

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

Znajduje wszystkie #full-width .companies i wybiera tylko te .companies, podobnie jak selektory są używane do kierowania określonych elementów w standardzie w CSS.
Następnie używa .parents do "backtrack" i zaznacza wszystkie rodzice .companies,
ale filtruje te wyniki, aby zachować tylko #fill-width elementy, tak że w końcu,
wybiera tylko #full-width element, jeśli ma potomek klasy .companies.
Na koniec przypisuje nową wartość CSS (width) wynikowemu elementowi.

$(".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 Reference Docs:
$() lub jQuery () : element DOM.
.znajdź: pobieranie Potomków każdego elementu w bieżącym zestawie dopasowanych elementów, filtrowanych przez selektor, obiekt jQuery lub element.
. rodzice: Get the bezpośrednio poprzedzające rodzeństwo każdego elementu w zbiorze dopasowanych elementów. Jeśli dostępny jest selektor, pobiera on poprzednie rodzeństwo tylko wtedy, gdy pasuje do tego selektora(filtruje wyniki, aby zawierały tylko wymienione elementy / selektory).
.css: ustaw jedną lub więcej właściwości CSS dla zestawu dopasowanych elementów.

Jeśli znasz dokładną pozycję, wykluczenie wszystkich kolejnych rodzeństwa na podstawie :nth-child() zadziała.

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

, który wybierze wszystkie liS PRZED 3. (np. 1. i 2.). Ale moim zdaniem wygląda to brzydko i ma bardzo ciasne zastosowanie.

Możesz również wybrać NTH-dziecko od prawej do lewej:

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

Który robi to samo.

Usunięcie stylów następnego rodzeństwa po najechaniu kursorem, tak aby wyglądało na to, że tylko poprzednie rodzeństwo miało style dodane po najechaniu kursorem.

ul li {
  color: red;
  cursor: pointer;
}

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>

Możesz użyć podwójnej negacji

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

Zastąp SELECTOR albo TAG albo .CLASS (użycie #ID jest prawdopodobnie zbyt specyficzne ). Zastąp FILTER innym :PSUEDO-SELECTOR (próbowałem tylko :hover) lub .CLASS (więcej na przełączanie przez Javascript).

Ponieważ typowe użycie będzie prawdopodobnie polegać na zawisaniu (patrz przykład poniżej)

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

Nie ma niestety selektora "poprzedni", ale możesz ewentualnie nadal uzyskać ten sam efekt, używając pozycjonowania (np. float right). To zależy od tego, co próbujesz zrobić.

W moim przypadku, chciałem przede wszystkim CSS 5-gwiazdkowy system oceny. Musiałbym pokolorować (lub zamienić ikonę) poprzednie gwiazdki. Pływając każdy element w prawo, mam zasadniczo taki sam efekt(html dla gwiazd więc musi być napisane "wstecz").

Używam FontAwesome w tym przykładzie i zamiana między unicodami FA-star-o i fa-star 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/

W zależności od konkretnego celu, istnieje sposób, aby osiągnąć użyteczność selektora nadrzędnego bez jego używania (nawet jeśli taki miałby istnieć)...

Powiedzmy, że mamy:

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

Co zrobić, aby bloczki skarpet (w tym Kolory skarpet) wyróżniały się wizualnie za pomocą odstępów?

Co byłoby miłe, ale nie istnieje:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

Co istnieje:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

To ustawia wszystkie linki kotwiące, aby miały margines 15px na górze i resetuje go z powrotem do 0 dla tych, którzy nie mają UL elementy (lub inne znaczniki) wewnątrz LIs.

Potrzebowałem rozwiązania, aby wybrać poprzedni brat tr. Wymyśliłem to rozwiązanie używając Reacta i Styled-components. To nie jest moje dokładne rozwiązanie (to jest z pamięci, godziny później). Wiem, że jest wada w funkcji setHighlighterRow.

OnMouseOver wiersz ustawia indeks wiersza na stan i ponownie odczytuje poprzedni wiersz z nowym kolorem tła

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

Nie ma, ajest .

Jeśli musisz umieścić etykietę przed wejściem , po prostu umieść etykietę po wejściu i zachowaj zarówno Etykietę i wejście wewnątrz div, i styl div Jak Następuje:

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

Teraz możesz zastosować standardowe opcje stylizacji następnego rodzeństwa dostępne w css, a będzie to wyglądać tak, jakbyś używał poprzedniego rodzeństwa stylizacja.

Nie myśl, że jest tu podobna odpowiedź, więc spróbuj tego. Przy założeniu HTML:

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

Dodaj styl do wszystkich dzieci, a następnie cofnij styl do celu i rodzeństwo dzieci celu.

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

Miałem podobny problem i dowiedziałem się, że wszystkie problemy tego rodzaju można rozwiązać w następujący sposób:

1. nadaj wszystkim przedmiotom styl.
2. nadaj wybranemu elementowi styl.
3. nadaj następnym elementom styl używając + lub ~.

I w ten sposób będziesz mógł stylizować swoje bieżące, poprzednie elementy (wszystkie elementy nadpisane przez bieżące i następne elementy) i następne elementy.

Przykład:

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

Oto link do podobnego pytania

CSS Zaznacz wszystkie poprzednie rodzeństwo dla oceny gwiazdek

Więc zamieszczam moje rozwiązanie za pomocą bitów odpowiedzi everyones i każdy może użyć go jako odniesienia i ewentualnie polecam ulepszenia.

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

Możesz zmienić układ html, ustawić kontener na flex lub grid, a także ustawić dla każdego dziecka właściwość "order", aby wyglądał tak, jak chcesz

Miałem ten sam problem, podczas gdy próbowałem zmienić kolor wypełnienia ikon na wejściu, mój kod wyglądał mniej więcej tak:

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

Problem polegał na tym, że używam vue-bootstrap slot , aby wstrzyknąć prepend, więc nawet jeśli zmienię lokalizację, nadal będzie renderowany po wejściu

Cóż, moim rozwiązaniem było przesunięcie ich lokalizacji i dodanie niestandardowego prepend i używanego symbolu~, ponieważ css nie obsługuje poprzedniego rodzeństwa.

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

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

Więc po prostu spróbuj zmienić jego pozycję, a jeśli to konieczne użyj css zamówienie lub pozycja: absolutna; aby osiągnąć to, czego chcesz i uniknąć używania javascript do tego rodzaju potrzeb.