Dấu cộng ( +) dành cho anh chị em tiếp theo.

Có tương đương với anh chị em trước không?

Không, không có bộ chọn "anh chị em trước".

Trên một lưu ý liên quan, ~dành cho anh chị em kế vị chung (có nghĩa là phần tử xuất hiện sau phần này, nhưng không nhất thiết phải ngay sau đó) và là một bộ chọn CSS3. +dành cho anh chị em tiếp theo và là CSS2.1.

Xem Trình kết hợp anh chị em liền kề từ Bộ chọn Cấp 3 và 5.7 Bộ chọn anh chị em liền kề từ Đặc tả Cascading Style Sheets Cấp 2 Bản sửa đổi 1 (CSS 2.1) .

Tôi tìm thấy một cách để tạo kiểu cho tất cả anh chị em trước đây (đối diện ~) có thể hoạt động tùy thuộc vào những gì bạn cần.

Giả sử bạn có một danh sách các liên kết và khi di chuột vào một liên kết, tất cả các liên kết trước đó sẽ chuyển sang màu đỏ. Bạn có thể làm như thế này:

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

Bộ chọn cấp 4 giới thiệu:has() (trước đây là chỉ báo chủ đề !) sẽ cho phép bạn chọn anh chị em trước đó với:

previous:has(+ next) {}

Tuy nhiên, tại thời điểm viết bài, đó là một khoảng cách vượt quá giới hạn để hỗ trợ trình duyệt.

Xem xét các thuộc ordertính của bố trí flex và lưới.

Tôi sẽ tập trung vào flexbox trong các ví dụ bên dưới, nhưng các khái niệm tương tự áp dụng cho Grid.

Với flexbox, một bộ chọn anh chị em trước đó có thể được mô phỏng.

Đặc biệt, thuộc tính flex ordercó thể di chuyển các yếu tố xung quanh màn hình.

Đây là một ví dụ:

Bạn muốn phần tử A chuyển sang màu đỏ khi phần tử B được di chuột.

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

BƯỚC

1. Làm cho ulmột container flex.
   
   

   ul { display: flex; }

2. Đảo ngược thứ tự của anh chị em trong đánh dấu.
   
   

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

3. Sử dụng bộ chọn anh chị em để nhắm mục tiêu Phần tử A ( ~hoặc +sẽ làm).
   
   

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

4. Sử dụng thuộc tính flex orderđể khôi phục thứ tự của anh chị em trên màn hình trực quan.
   
   

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

...và Voila! Một bộ chọn anh chị em trước đó được sinh ra (hoặc ít nhất là mô phỏng).

Đây là mã đầy đủ:

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>

Từ thông số kỹ thuật flexbox:

5.4. Lệnh hiển thị: ordertài sản

Theo mặc định, các mục Flex được hiển thị và sắp xếp theo thứ tự như chúng xuất hiện trong tài liệu nguồn. Các ordertài sản có thể được sử dụng để thay đổi thứ tự này.

Các orderkiểm soát bất động sản thứ tự mà mục flex xuất hiện trong container flex, bằng cách gán chúng cho các nhóm thứ. Nó nhận một <integer>giá trị duy nhất , xác định nhóm thứ tự mà mục flex thuộc về.

orderGiá trị ban đầu cho tất cả các mục flex là 0.

Cũng xem ordertrong thông số Bố cục Lưới CSS .

Ví dụ về "bộ chọn anh chị em trước" được tạo bằng thuộc tính 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

Lưu ý bên lề - Hai niềm tin lỗi thời về CSS

Flexbox đang phá vỡ niềm tin từ lâu về CSS.

Một niềm tin như vậy là một bộ chọn anh chị em trước đó là không thể trong CSS .

Nếu nói niềm tin này là phổ biến sẽ là một cách đánh giá thấp. Dưới đây là một mẫu các câu hỏi liên quan trên Stack Overflow một mình:

• Chọn anh chị em trước của một phần tử trong CSS bằng cách sử dụng bộ chọn
• CSS: chọn anh chị em trước
• CSS chọn anh chị em trước
• Bộ chọn liền kề trước đó trong CSS
• Chọn anh chị em trước khi di chuột
• Bộ chọn CSS để có anh chị em trước
• Thay đổi màu của các phần tử anh chị em khi di chuột bằng CSS
• Cách chọn anh chị em trước bằng cú pháp selenium css
• CSS Selector để chọn một phần tử TRƯỚC một phần tử khác?
• Cách thêm kiểu dáng cho anh chị em trước của hoạt động đầu vào chỉ bằng CSS
• Bộ chọn CSS cho các yếu tố tiếp theo và trước đó
• Cách ảnh hưởng đến các yếu tố khác khi div được di chuột

Như đã mô tả ở trên, niềm tin này không hoàn toàn đúng. Một bộ chọn anh chị em trước có thể được mô phỏng trong CSS bằng cách sử dụng thuộc tính flex order.

các z-indexMyth

Một niềm tin lâu dài khác là z-indexchỉ hoạt động trên các yếu tố định vị.

Trên thực tế, phiên bản mới nhất của thông số kỹ thuật - Dự thảo của W3C Editor - vẫn khẳng định điều này là đúng:

9.9.1 Chỉ định cấp độ ngăn xếp: thuộc z-index tính

z-index

• Giá trị: tự động | | thừa kế
• Ban đầu: tự động
• Áp dụng cho: các yếu tố định vị
• Kế thừa: không
• Tỷ lệ: Không áp dụng
• Phương tiện: trực quan
• Giá trị tính toán: theo quy định

_{(nhấn mạnh thêm)}

Tuy nhiên, trên thực tế, thông tin này đã lỗi thời và không chính xác.

Các yếu tố là vật phẩm flex hoặc vật phẩm lưới có thể tạo ra bối cảnh xếp chồng ngay cả khi positioncó static.

4.3. Đặt hàng linh hoạt Z

Các mục Flex vẽ chính xác giống như các khối nội tuyến, ngoại trừ thứ tự tài liệu được sửa đổi theo thứ tự được sử dụng thay cho thứ tự tài liệu thô và z-indexcác giá trị khác ngoài việc autotạo bối cảnh xếp chồng ngay cả khi positioncó static.

5.4. Đặt hàng trục Z: thuộc z-indextính

Thứ tự vẽ của các mục lưới hoàn toàn giống với các khối nội tuyến, ngoại trừ thứ tự tài liệu được sửa đổi thứ tự được sử dụng thay cho thứ tự tài liệu thô và z-indexcác giá trị khác ngoài việc autotạo bối cảnh xếp chồng ngay cả khi positioncó static.

Dưới đây là một minh chứng về cách z-indexlàm việc trên các mục flex không định vị: https://jsfiddle.net/m0wddwxs/

Tôi đã có cùng một câu hỏi, nhưng sau đó tôi đã có một khoảnh khắc "duh". Thay vì viết

x ~ y

viết

y ~ x

Rõ ràng điều này khớp với "x" thay vì "y", nhưng nó trả lời "có khớp không?" câu hỏi và truy cập DOM đơn giản có thể đưa bạn đến đúng yếu tố hiệu quả hơn là lặp trong javascript.

Tôi nhận ra rằng câu hỏi ban đầu là một câu hỏi CSS nên câu trả lời này có lẽ hoàn toàn không liên quan, nhưng những người dùng Javascript khác có thể vấp phải câu hỏi thông qua tìm kiếm như tôi đã làm.

Hai thủ đoạn . Về cơ bản đảo ngược thứ tự HTML của các yếu tố bạn muốn trong HTML và sử dụng toán tử
~ anh chị em tiếp theo :

float-right + đảo ngược thứ tự các phần tử 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>

Cha mẹ có direction: rtl;+ nghịch đảo thứ tự các yếu tố bên trong

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

+dành cho anh chị em tiếp theo. Có tương đương với anh chị em trước không?

Bạn có thể sử dụng hai bộ chọn rìu : !và?

Có 2 bộ chọn anh chị em tiếp theo trong CSS thông thường:

• +là công cụ chọn anh chị em ngay sau đó
• ~là bất kỳ bộ chọn anh chị em tiếp theo

Trong CSS thông thường, không có bộ chọn anh chị em trước đó .

Tuy nhiên, trong thư viện bộ xử lý hậu rìu CSS, có 2 bộ chọn anh chị em trước đó :

• ?là ngay lập tức chọn anh chị em trước đó (đối diện +)
• !là bất kỳ bộ chọn anh chị em nào trước đó (ngược lại ~)

Ví dụ làm việc:

Trong ví dụ dưới đây:

• .any-subsequent:hover ~ div chọn bất kỳ tiếp theo div
• .immediate-subsequent:hover + div chọn ngay sau đó div
• .any-previous:hover ! div chọn bất kỳ trước div
• .immediate-previous:hover ? div chọn trước 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>

Một giải pháp flexbox khác

Bạn có thể sử dụng nghịch đảo thứ tự các phần tử trong HTML. Sau đó, ngoài việc sử dụng ordernhư trong câu trả lời của Michael_B, bạn có thể sử dụng flex-direction: row-reverse;hoặc flex-direction: column-reverse;tùy thuộc vào bố cục của bạn.

Mẫu làm việc:

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

Không có cách chính thức để làm điều đó vào lúc này nhưng bạn có thể sử dụng một mẹo nhỏ để đạt được điều này! Hãy nhớ rằng đó là thử nghiệm và nó có một số hạn chế ... (kiểm tra liên kết này nếu bạn lo lắng về khả năng tương thích của hoa tiêu)

Những gì bạn có thể làm là sử dụng bộ chọn CSS3: classe giả được gọi là 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>

Hạn chế

• Bạn không thể chọn các yếu tố trước dựa trên các lớp của các yếu tố tiếp theo
• Điều này cũng tương tự đối với các lớp giả

Nếu bạn biết chính xác vị trí :nth-child()loại trừ dựa trên tất cả các anh chị em sau đây sẽ hoạt động.

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

Mà sẽ chọn tất cả li s trước thứ 3 (ví dụ 1 và 2). Nhưng, theo tôi điều này có vẻ xấu và có một usecase rất chặt chẽ.

Bạn cũng có thể chọn con thứ n từ phải sang trái:

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

Mà làm như vậy.

Không. Không thể thông qua CSS. Nó đưa "Cascade" vào trái tim ;-).

Tuy nhiên, nếu bạn có thể thêm JavaScript vào trang của mình, một chút jQuery có thể đưa bạn đến mục tiêu cuối cùng.
Bạn có thể sử dụng jQuery findđể thực hiện "nhìn về phía trước" trên phần tử / lớp / id mục tiêu của bạn, sau đó quay lại để chọn mục tiêu của bạn.
Sau đó, bạn sử dụng jQuery để viết lại DOM (CSS) cho phần tử của bạn.

Dựa trên câu trả lời này của Mike Brant , đoạn mã jQuery sau đây có thể giúp ích.

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

Điều này đầu tiên chọn tất cả <ul>s ngay lập tức theo a <p>.
Sau đó, nó "quay lại" để chọn tất cả các <p>s trước đó từ tập <ul>s đó.

Thực tế, "anh chị em trước" đã được chọn thông qua jQuery.
Bây giờ, sử dụng .csshàm để truyền vào các giá trị mới CSS của bạn cho phần tử đó.

Trong trường hợp của tôi, tôi đang tìm cách chọn một DIV với id #full-width, nhưng CHỈ nếu nó có một DIV hậu duệ (gián tiếp) với lớp .companies.

Tôi đã kiểm soát tất cả các HTML bên dưới .companies, nhưng không thể thay đổi bất kỳ HTML nào ở trên nó.
Và dòng thác chỉ đi 1 hướng: xuống.

Do đó tôi có thể chọn TẤT CẢ #full-width.
Hoặc tôi có thể chọn .companieschỉ theo a #full-width.
Nhưng tôi không thể chỉ chọn #full-widths mà tiến hành .companies .

Và, một lần nữa, tôi không thể thêm .companiesbất kỳ thứ gì cao hơn trong HTML. Đó là một phần của HTML được viết ra bên ngoài và bao bọc mã của chúng tôi.

Nhưng với jQuery, tôi có thể chọn #full-widths yêu cầu , sau đó gán kiểu thích hợp:

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

Điều này tìm thấy tất cả #full-width .companiesvà chỉ chọn những thứ đó .companies, tương tự như cách các bộ chọn được sử dụng để nhắm mục tiêu các yếu tố cụ thể trong tiêu chuẩn trong CSS.
Sau đó, nó sử dụng .parentsđể "quay lại" và chọn TẤT CẢ cha mẹ .companies,
nhưng lọc các kết quả đó để chỉ giữ lại #fill-widthcác phần tử, do đó, cuối cùng,
nó chỉ chọn một #full-widthphần tử nếu có .companieshậu duệ lớp.
Cuối cùng, nó gán một widthgiá trị CSS ( ) mới cho phần tử kết quả.

$(".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>

Tài liệu tham khảo jQuery:
$ () hoặc jQuery () : Phần tử DOM.
. find : Lấy hậu duệ của từng phần tử trong tập hợp các phần tử phù hợp hiện tại, được lọc bởi bộ chọn, đối tượng jQuery hoặc phần tử.
. cha mẹ : Nhận anh chị em ngay trước mỗi phần tử trong tập hợp các phần tử phù hợp. Nếu một bộ chọn được cung cấp, nó chỉ truy xuất anh chị em trước đó nếu nó phù hợp với bộ chọn đó (lọc kết quả để chỉ bao gồm các thành phần / bộ chọn được liệt kê).
. css : Đặt một hoặc nhiều thuộc tính CSS cho tập hợp các phần tử phù hợp.

Không có bộ chọn anh chị em "trước" không may, nhưng bạn có thể vẫn được hiệu ứng tương tự bằng cách sử dụng định vị (ví dụ: float phải). Nó phụ thuộc vào những gì bạn đang cố gắng làm.

Trong trường hợp của tôi, tôi muốn có một hệ thống xếp hạng 5 sao chủ yếu là CSS. Tôi sẽ cần tô màu (hoặc hoán đổi biểu tượng của) các ngôi sao trước đó. Bằng cách thả nổi từng phần tử đúng, về cơ bản, tôi nhận được cùng một hiệu ứng (do đó, html cho các ngôi sao phải được viết 'ngược').

Tôi đang sử dụng FontAwgie trong ví dụ này và hoán đổi giữa các unicodes của fa-star-o và fa-star http://fortawclaw.github.io/Font-Awemme/

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/

Tùy thuộc vào mục tiêu chính xác của bạn, có một cách để đạt được sự hữu ích của bộ chọn cha mà không cần sử dụng một (ngay cả khi chúng tồn tại) ...

Nói rằng chúng tôi có:

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

Chúng ta có thể làm gì để làm cho khối Vớ (bao gồm cả màu sock) nổi bật bằng cách sử dụng khoảng cách?

Điều gì sẽ tốt đẹp nhưng không tồn tại:

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

Cái gì tồn tại:

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

Điều này đặt tất cả các liên kết neo có lề 15px ở trên cùng và đặt lại về 0 cho những liên kết không có phần tử UL (hoặc các thẻ khác) bên trong LIs.

Tôi cần một giải pháp để chọn anh chị tr trước. Tôi đã đưa ra giải pháp này bằng cách sử dụng các thành phần React và Styled. Đây không phải là giải pháp chính xác của tôi (Đây là từ bộ nhớ, vài giờ sau). Tôi biết có một lỗ hổng trong hàm setHighlighterRow.

OnMouseOver một hàng sẽ đặt chỉ mục hàng thành trạng thái và đăng ký lại hàng trước đó bằng màu nền mới

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

Không có, và có .

Nếu bạn phải đặt nhãn trước đầu vào, thay vì đặt nhãn sau đầu vào, hãy giữ cả nhãn & đầu vào bên trong div và tạo kiểu cho div như sau:

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

Bây giờ bạn có thể áp dụng các tùy chọn kiểu dáng anh chị em tiêu chuẩn tiếp theo có sẵn trong css và nó sẽ xuất hiện giống như bạn sử dụng kiểu dáng anh chị em trước đó.

Tôi đã có một vấn đề tương tự và phát hiện ra rằng tất cả các vấn đề thuộc về bản chất này có thể được giải quyết như sau:

1. cung cấp cho tất cả các mục của bạn một phong cách.
2. cung cấp cho mục đã chọn của bạn một phong cách.
3. cung cấp cho các mục tiếp theo một phong cách bằng cách sử dụng + hoặc ~.

và bằng cách này, bạn sẽ có thể tạo kiểu cho các mục hiện tại, trước đây của bạn (tất cả các mục được ghi đè bằng các mục hiện tại và tiếp theo) và các mục tiếp theo của bạn.

thí dụ:

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

Hy vọng nó sẽ giúp được ai đó.