css中如何改变表格颜色

发表于前端技术学习版块 css,教程

在CSS中改变表格颜色的方法非常简单，只需要使用属性选择器选择需要改变颜色的单元格或单元格集合，然后设置它们的背景颜色即可。/* 单独一个单元格的颜色 */ td#cell1 { background

在CSS中改变表格颜色的方法非常简单，只需要使用属性选择器选择需要改变颜色的单元格或单元格集合，然后设置它们的背景颜色即可。

/* 单独一个单元格的颜色 */
td#cell1 {
  background-color: red;
}

/* 单元格集合的颜色 */
tr:nth-child(even) td {
  background-color: blue;
}

以上代码中，td#cell1使用了ID选择器选择一个单独的单元格，并将其背景颜色设置为红色。而tr:nth-child(even) td则使用了属性选择器选择所有偶数行的单元格集合，并将它们的背景颜色设置为蓝色。下面是一个完整的示例代码，用于展示如何同时使用两种选择器改变表格颜色：

<html>
  <head>
    <style>
      /* 单独一个单元格的颜色 */
      td#cell1 {
        background-color: red;
      }

      /* 单元格集合的颜色 */
      tr:nth-child(even) td {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id="cell1">红色的单元格</td>
        <td>蓝色的单元格</td>
      </tr>
      <tr>
        <td>蓝色的单元格</td>
        <td>红色的单元格</td>
      </tr>
      <tr>
        <td>红色的单元格</td>
        <td>蓝色的单元格</td>
      </tr>
    </table>
  </body>
</html>

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。