如何重构某些 td 元素的颜色？

Answer 1

CSS 中有一个名为 :is 的伪类，它可以让你删除代码重复

td:is([style*="background-color: #ffc"], [style*="background-color: #fb9"], [style*="background-color: #bfc"], [style*="background-color: #fcc"]) {
    background-color: #0d1117 !important;
}

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/:is

---

或者您可以通过使用forEach 来使用javascript！

这个怎么运作：你有两个变量，
第一个需要一组十六进制颜色代码。
第二个变量需要您希望元素着色的最终颜色。

如何使它适用于我的项目：

1. 创建<script> 标记或javascript 文件。
2. 在其中插入以下代码：

   let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line
   let finalColor = "0d1117";
   
   colorsArray.forEach((color) => {
       let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);
   
       tdWithColor.forEach((element) => {
           element.style = `background-color: #${finalColor}`;
       })
   });
   
   // watch the code snippet below if you want comments
   

   3. 将变量更改为您需要的值。

   ---

   带有演示示例的代码 sn-p：

   let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line... don't put "#" in the beginning (js automatically adding it)
   let finalColor = "0d1117"; // your final color, don't put "#" in the beginning (js automatically adding it)
   
   /* Don't change the lines below */
   
   /* for every color we are adding this logic below */
   colorsArray.forEach((color) => {
     /* getting all the html elements with the same color */
     let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);
   
     /* if there is more than one td of the same color we are coloring it too */
     tdWithColor.forEach((element) => {
       element.style = `background-color: #${finalColor}`;
     })
   });

       <!-- this is only a example -->
       <table>
           <tr>
               <!-- I am creating multiple elements with the same bg color to test javascript  -->
               <td style="background-color: #ffc">FFC</td>
               <td style="background-color: #ffc">FFC</td>
               <td style="background-color: #ffc">FFC</td>
   
               <td style="background-color: #fb9">FB9</td>
               <td style="background-color: #fb9">FB9</td>
               <td style="background-color: #fb9">FB9</td>
   
               <td style="background-color: #bfc">BFC</td>
               <td style="background-color: #bfc">BFC</td>
               <td style="background-color: #bfc">BFC</td>
   
               <td style="background-color: #fcc">FCC</td>
               <td style="background-color: #fcc">FCC</td>
               <td style="background-color: #fcc">FCC</td>
           </tr>
       </table>