هل يوجد محدد CSS "للأخوة السابقين"؟

https://stackoverflow.com/questions/1817792

08-07-2019
|

سؤال

علامة الزائد (+) للأخ القادم.هل هناك ما يعادل الأخ السابق؟

المحلول

لا، لا يوجد "الأخوة السابق" محدد.

وعلى صعيد ذات صلة، ~ هو لشقيقه خلفا العام (أي العنصر يأتي بعد هذا واحد، ولكن ليس بالضرورة على الفور بعد) وغير محدد CSS3. + هو لشقيقه القادم وهو CSS2.1.

مجاور الأخوة combinator من <أ href = ل "http://www.w3.org/TR/css3-selectors/" يختلط = "noreferrer"> المختارون مستوى 3 و <لأ href = "http://www.w3.org/TR/CSS21 /selector.html#adjacent-selectors "يختلط =" noreferrer "> 5.7 محددات الأخوة المجاورة من <لأ href =" http://www.w3.org/TR/CSS21/cover.html#minitoc "يختلط = "noreferrer"> أوراق الأنماط المتتالية المستوى 2 التنقيح 1 (CSS 2.1) مواصفات .

نصائح أخرى

ولقد وجدت وسيلة لأسلوب كل الأشقاء السابقة (عكس ~) التي قد تعمل اعتمادا على ما تحتاجه.

ودعونا نقول لديك قائمة من الروابط وعندما تحوم على واحد، ينبغي لجميع سابقاتها إلى اللون الأحمر. يمكنك القيام بذلك مثل هذا:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

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

المختارون مستوى 4 يقدم :has() (سابقا ! مؤشر الموضوع) والتي سوف تسمح لك لاختيار أخ السابق مع:

previous:has(+ next) {}

و... ولكن في وقت كتابة هذا التقرير، هو على مسافة أبعد من حافة النزيف لدعم المتصفح.

النظر في `order` خاصية التخطيطات المرنة والشبكية.

سأركز على flexbox في الأمثلة أدناه، ولكن نفس المفاهيم تنطبق على Grid.

باستخدام flexbox، يمكن محاكاة محدد الأخوة السابق.

على وجه الخصوص، المرن order يمكن للخاصية تحريك العناصر حول الشاشة.

هنا مثال:

تريد أن يتحول العنصر A إلى اللون الأحمر عند تمرير مؤشر الماوس فوق العنصر B.
<ul>
    <li>A</li>
    <li>B</li>
</ul>

خطوات

اعمل ال ul حاوية مرنة.
```
ul { display: flex; }
```

عكس ترتيب الأشقاء في العلامات.
```
<ul>
   <li>B</li>
   <li>A</li>
</ul>
```

استخدم محدد الأخوة لاستهداف العنصر أ (~ أو + سوف تفعل) .
```
li:hover + li { background-color: red; }
```

استخدم المرن 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.ترتيب العرض:ال order ملكية

يتم عرض العناصر المرنة وتخطيطها افتراضيًا بنفس الترتيب الذي تظهر به في المستند المصدر.ال order يمكن استخدام الخاصية لتغيير هذا الترتيب.

ال order تتحكم الخاصية في الترتيب الذي تظهر به العناصر المرنة داخل الحاوية المرنة، عن طريق تعيينها إلى مجموعات ترتيبية.يستغرق واحدا <integer> القيمة ، والتي تحدد المجموعة الترتيبية التي ينتمي إليها العنصر المرن.

الأولي order القيمة لجميع العناصر المرنة هي 0.

انظر أيضا order في مواصفات تخطيط الشبكة CSS.

أمثلة على "محددات الأخوة السابقة" التي تم إنشاؤها باستخدام المرن 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.

أحد هذه الاعتقادات هو أن محدد الأخوة السابق غير ممكن في CSS.

إن القول بأن هذا الاعتقاد منتشر على نطاق واسع سيكون بخس.فيما يلي عينة من الأسئلة ذات الصلة حول Stack Overflow وحده:

وكما هو موضح أعلاه، فإن هذا الاعتقاد ليس صحيحا تماما.يمكن محاكاة محدد الأخوة السابق في CSS باستخدام المرن order ملكية.

ال z-index خرافة

هناك اعتقاد آخر طويل الأمد وهو ذلك z-index يعمل فقط على العناصر الموضوعة.

في الواقع، الإصدار الأحدث من المواصفات - مسودة محرر W3C - لا يزال يؤكد أن هذا صحيح:

9.9.1 تحديد مستوى المكدس:ال z-indexملكية

z-index

قيمة:السيارات | | يرث

أولي:آلي

ينطبق على:العناصر الموضوعة

وارث:لا

النسب المئوية:لا يوجد

وسائط:مرئي

القيمة المحسوبة:كما هو محدد

_{(تم اضافة التأكيدات)}

لكن في الواقع، هذه المعلومات قديمة وغير دقيقة.

العناصر التي العناصر المرنة أو عناصر الشبكة يمكن إنشاء سياقات التراص حتى عندما position يكون static.

4.3.ترتيب العناصر المرنة على شكل Z

ترسم العناصر المرنة تمامًا مثل الكتل المضمنة ، باستثناء استخدام ترتيب المستند المعدل هذا بدلاً من ترتيب المستند الخام ، و z-index قيم غير auto إنشاء سياق التراص حتى لو position يكون static.

5.4.ترتيب المحور Z:ال z-index ملكية

يكون ترتيب اللوحة لعناصر الشبكة هو نفسه تمامًا مثل الكتل المضمونة ، باستثناء استخدام ترتيب المستند المعدل هذا بدلاً من ترتيب المستند الخام ، و z-index قيم غير auto إنشاء سياق التراص حتى لو position يكون static.

وهنا مظاهرة ل z-index العمل على العناصر المرنة غير الموضعية: https://jsfiddle.net/m0wddwxs/

وكان لي نفس السؤال، ولكن بعد ذلك كان لي "دوه" لحظة. بدلا من كتابة

x ~ y

والكتابة

y ~ x

ومن الواضح أن هذه المباريات "س" بدلا من "ص"، ولكنه يجيب على "هناك مباراة؟" سؤال بسيط واجتياز DOM قد تحصل على العنصر الصحيح أكثر كفاءة من حلقات في جافا سكريبت.

وأنا أدرك أن السؤال الأصلي كان سؤال CSS لذلك هذا الجواب هو على الأرجح لا صلة لها بالموضوع تماما، ولكن المستخدمين جافا سكريبت أخرى قد تتعثر حول مسألة عن طريق البحث كما فعلت.

واثنان <م> الحيل . قلب أساسا ترتيب 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>

+ هو للأخ القادم.هل هناك ما يعادل الأخوة السابقة؟

يمكنك استخدام الاثنين فأس محددات: `!` و `?`

هناك 2 محددات الأخوة اللاحقة في CSS التقليدية:

+ هل مباشر محدد الأخوة اللاحق
~ هل أي محدد الأخوة اللاحق

في CSS التقليدية، هناك لا يوجد محدد شقيق سابق.

ومع ذلك، في فأس توجد مكتبة 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>

آخر حل حول flexbox

ويمكنك استخدام معكوس ترتيب العناصر في HTML. ثم إلى جانب استخدام order كما الإجابة في Michael_B في الذي يمكن استخدام flex-direction: row-reverse; أو flex-direction: column-reverse; اعتمادا على التصميم الخاص بك.

وعينة العمل:

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

لا توجد طريقة رسمية للقيام بذلك في الوقت الحالي ولكن يمكنك استخدام خدعة صغيرة لتحقيق ذلك!تذكر أنها تجريبية ولها بعض القيود ...(يفحص هذا الرابط إذا كنت قلقًا بشأن توافق المستكشف)

ما يمكنك فعله هو استخدام محدد 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>

محددات

لا يمكنك تحديد العناصر السابقة بناءً على فئات العناصر التالية
وهذا هو نفسه بالنسبة للفئات الزائفة

إذا كنت تعرف الموضع الدقيق استثناء على أساس :nth-child() من جميع الأخوة والأخوات التالية سوف تعمل.

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

والتي من شأنها تحديد كافة lis قبل 3 (مثل 1 و 2). ولكن، في رأيي هذا تبدو قبيحة ويحتوي على نموذج التطبيقي ضيق للغاية.

وأنت أيضا يمكن تحديد الألف الطفل من اليمين إلى اليسار:

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

ما يفعل نفس الشيء.

وليس هناك "السابق" الأخوة محدد للأسف، ولكن يمكنك <م> ربما لا يزال الحصول على نفس التأثير باستخدام المواقع (على سبيل المثال تطفو اليمين). ذلك يعتمد على ما تحاول القيام به.

في حالتي، كنت أرغب في المقام الأول CSS 5 نجوم نظام التصنيف. وأود أن الحاجة إلى اللون (أو مبادلة رمز) النجوم السابقة. من خلال تعويم كل الحق عنصر، وأنا أساسا الحصول على نفس التأثير (أتش تي أم أل للنجوم وبالتالي يجب أن تكون مكتوبة "الى الوراء).

وأنا باستخدام FontAwesome في هذا المثال ومبادلة بين 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/

واعتمادا على الهدف المحدد الخاص بك، هناك وسيلة لتحقيق فائدة محدد الوالدين دون استخدام واحد (حتى لو كان واحد في الوجود) ...

ويقول لدينا:

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

وماذا يمكننا القيام به لجعل كتلة الجوارب (بما في ذلك الألوان جورب) تبرز بصريا باستخدام تباعد؟

وماذا سيكون لطيفا ولكن لا وجود له:

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 لأولئك الذين ليس لهم عناصر UL (أو العلامات الأخرى) داخل الدعاوى.

واجهت مشكلة مماثلة واكتشفت أن كل مشكلة من هذا النوع يمكن حلها على النحو التالي:

إعطاء كل ما تبذلونه من العناصر الاسلوب.
امنح العنصر الذي اخترته نمطًا.
إعطاء العناصر التالية نمطًا باستخدام + أو ~.

وبهذه الطريقة ستتمكن من تصميم عناصرك الحالية والسابقة (تم تجاوز جميع العناصر بالعناصر الحالية والتالية) وعناصرك التالية.

مثال:

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

نأمل أن يساعد شخص ما.

لا.لا يمكن ذلك عبر CSS.يأخذ "الشلال" إلى القلب ؛-).

ومع ذلك، إذا كنت قادرا على إضافة جافا سكريبت إلى صفحتك، قليلا من مسج يمكن أن يوصلك إلى هدفك النهائي.
يمكنك استخدام مسج find لإجراء "نظرة للأمام" على العنصر/الفئة/المعرف المستهدف، ثم التراجع لتحديد هدفك.
ثم تستخدم jQuery لإعادة كتابة DOM (CSS) للعنصر الخاص بك.

مرتكز على هذه الإجابة من مايك برانت، مقتطف jQuery التالي يمكن أن يساعد.

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

هذا أولاً يحدد الكل <ul>التي تتبع مباشرة أ <p>.
ثم "يتراجع" لتحديد كل ما سبق <p>من تلك المجموعة من <ul>س.

على نحو فعال، تم تحديد "الأخ السابق" عبر jQuery.
الآن، استخدم .css وظيفة لتمرير قيم CSS الجديدة لهذا العنصر.

في حالتي كنت أبحث عن طريقة لتحديد DIV بالمعرف #full-width, ، ولكن فقط إذا كان لديه DIV سليل (غير مباشر) مع فئة .companies.

كان لدي السيطرة على كل HTML تحت .companies, ، ولكن لا يمكن تغيير أي من HTML الموجود فوقه.
ويذهب الشلال في اتجاه واحد فقط:تحت.

وبالتالي يمكنني اختيار الكل #full-widthس.
أو يمكنني الاختيار .companies التي اتبعت فقط أ #full-width.
ولكن ما يمكن أن أقوله لا حدد فقط #full-widthهذا باشر .companies.

ومرة أخرى لم أتمكن من الإضافة .companies أي أعلى في HTML.تمت كتابة هذا الجزء من HTML خارجيًا، وتم تغليف الكود الخاص بنا.

ولكن مع jQuery، أنا يستطيع حدد المطلوب #full-widths، ثم قم بتعيين النمط المناسب:

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

هذا يجد كل شيء #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:
$() أو مسج ():عنصر DOM.
.يجد:احصل على أحفاد كل عنصر في المجموعة الحالية من العناصر المطابقة، التي تمت تصفيتها بواسطة محدد أو كائن jQuery أو عنصر.
.آباء:احصل على الأخ السابق مباشرة لكل عنصر في مجموعة العناصر المطابقة.إذا تم توفير محدد، فإنه يسترد الشقيق السابق فقط إذا كان يطابق هذا المحدد (يقوم بتصفية النتائج لتشمل العناصر/المحددات المدرجة فقط).
.المغلق:قم بتعيين خاصية CSS واحدة أو أكثر لمجموعة العناصر المطابقة.

وأنا في حاجة إلى حل لتحديد الأخوة آر السابق. خطرت لي هذا الحل باستخدام تتفاعل ومكونات نصب. هذا ليس الحل الدقيق بلدي (وهذا من الذاكرة، بعد ساعات). أعرف أن هناك خلل في وظيفة setHighlighterRow.

وOnMouseOver سوف صف تعيين مؤشر الصف إلى الدولة، وrerender الصف السابق مع لون خلفية جديدة

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow

هل يوجد محدد CSS "للأخوة السابقين"؟

النظر في order خاصية التخطيطات المرنة والشبكية.