使用 CSS 的伪类选择器 nth-child 为奇数行和偶数应用不同的背景色

[复制链接]
1156 0
要为表格的奇数行和偶数行应用不同的样式,你可以使用 CSS 中的伪类选择器 nth-child。下面是一个示例代码,演示如何为奇数行和偶数行应用不同的背景色:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>表格样式控制</title>
  7. <style>
  8. /* 偶数行样式 */
  9. tr:nth-child(even) {
  10.     background-color: #f2f2f2;
  11. }

  12. /* 奇数行样式 */
  13. tr:nth-child(odd) {
  14.     background-color: #ffffff;
  15. }

  16. /* 表格样式 */
  17. table {
  18.     width: 100%;
  19.     border-collapse: collapse;
  20. }

  21. table, th, td {
  22.     border: 1px solid black;
  23.     padding: 8px;
  24. }
  25. </style>
  26. </head>
  27. <body>

  28. <table>
  29.   <tr>
  30.     <th>表头 1</th>
  31.     <th>表头 2</th>
  32.     <th>表头 3</th>
  33.   </tr>
  34.   <tr>
  35.     <td>数据 1</td>
  36.     <td>数据 2</td>
  37.     <td>数据 3</td>
  38.   </tr>
  39.   <tr>
  40.     <td>数据 4</td>
  41.     <td>数据 5</td>
  42.     <td>数据 6</td>
  43.   </tr>
  44.   <tr>
  45.     <td>数据 7</td>
  46.     <td>数据 8</td>
  47.     <td>数据 9</td>
  48.   </tr>
  49. </table>

  50. </body>
  51. </html>
复制代码


在这个示例中,tr:nth-child(even) 选择了表格中的偶数行,并将其背景色设置为灰色;tr:nth-child(odd) 选择了表格中的奇数行,并将其背景色设置为白色。你可以根据需要修改这些样式以达到你想要的效果。
有志和有钱者事竟成<諺>志さえあれば必ず成功する
搜索

研究报告

更多

社区同学

更多

客服中心

Admin@tjrzzl.com 周一至周日 10:00-22:00 仅收市话费

关注我们

  • 加入QQ群组
  • 关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
快速回复 返回顶部 返回列表