如何為類應用樣式-有解無憂

如何使它具有活動類的第一個 td 是紅色的，第二個是黃色的

table tr td.active { 
   background: red;
}

<div class="wrapper">
   <table>
     <tr>
       <td class="cell">1</td>
       <td class="cell">2</td>
       <td class="cell">3</td>
     </tr>
     <tr>
       <td class="cell active">4</td>
       <td class="cell in-range">5</td>
       <td class="cell in-range">6</td>
     </tr>
     <tr>
       <td class="cell in-range">7</td>
       <td class="cell active">8</td>
       <td class="cell">9</td>
     </tr>
   </table>
</div>

uj5u.com熱心網友回復：

您將只能使用 JS 來做到這一點：

//Select the Second active
const element = document.getElementsByClassName('active')[1];
//Apply the yellow color on the second element.
element.style.backgroundColor = 'yellow';

演示

//Select the Second active
const element = document.getElementsByClassName('active')[1];
//Apply the yellow color on the second element.
element.style.backgroundColor = 'yellow';

td.active { 
  background: red;
}

<div class="wrapper">
   <table>
     <tr>
       <td class="cell">1</td>
       <td class="cell">2</td>
       <td class="cell">3</td>
     </tr>
     <tr>
       <td class="cell active">4</td>
       <td class="cell in-range">5</td>
       <td class="cell in-range">6</td>
     </tr>
     <tr>
       <td class="cell in-range">7</td>
       <td class="cell active">8</td>
       <td class="cell">9</td>
     </tr>
   </table>
</div>

uj5u.com熱心網友回復：

您可以使用選擇第二個孩子nth-child()。

td.active { 
  background: red;
}
td.active:nth-child(2) { 
  background: yellow;
}

<table>
  <tr>
    <td class="cell">1</td>
    <td class="cell">2</td>
    <td class="cell">3</td>
  </tr>
  <tr>
    <td class="cell active">4</td>
    <td class="cell in-range">5</td>
    <td class="cell in-range">6</td>
  </tr>
  <tr>
    <td class="cell in-range">7</td>
    <td class="cell active">8</td>
    <td class="cell">9</td>
  </tr>
</table>

uj5u.com熱心網友回復：

在純 CSS 中，您可以使用:has()（但它的支持有限）并檢測除第一個之外的每個 .active 元素。

.active {
  background: red;
}

/* make siblings of the first .active element in yellow, if any */
.active ~ .active,

/* every .active element contained in a row that follows another
   row that contains an active element must be in yellow */
tr:has(.active) ~ tr .active {

   background: yellow;
}

<div class="wrapper">
   <table>
     <tr>
       <td class="cell">1</td>
       <td class="cell">2</td>
       <td class="cell">3</td>
     </tr>
     <tr>
       <td class="cell active">4</td>
       <td class="cell in-range">5</td>
       <td class="cell active in-range">6</td>
     </tr>
     <tr>
       <td class="cell in-range">7</td>
       <td class="cell active">8</td>
       <td class="cell">9</td>
     </tr>
     <tr>
       <td class="cell active">7</td>
       <td class="cell active">8</td>
       <td class="cell">9</td>
     </tr>
   </table>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508420.html

標籤：javascript html jQuery css

上一篇：單擊svg元素時如何更改其背景

下一篇：是否有一種演算法可以在每次執行中配對所有不同的配對而不會產生重復的結果（例如[1,2][2,1]）