登入 | 禁止注册
开启辅助访问
设为首页收藏网址

租賃視界社區

租賃視界社區»版块 › 兴趣 › 電算技術 › 程序编码 › CSS › 使用 CSS 的伪类选择器 nth-child 为奇数行和偶数应用不 ...

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

[复制链接]
100 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. }

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

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

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

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

  55. </body>
  56. </html>
复制代码


在这个示例中，tr:nth-child(even) 选择了表格中的偶数行，并将其背景色设置为灰色；tr:nth-child(odd) 选择了表格中的奇数行，并将其背景色设置为白色。你可以根据需要修改这些样式以达到你想要的效果。
CSS nth-child 伪类选择器

相关帖子

有志和有钱者事竟成＜諺＞志さえあれば必ず成功する

举报

回复
返回列表
搜索
  • 热门版块
  • 社区工具

研究报告

更多

精华推荐

更多

社区同学

更多

客服中心

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

关注我们

  • 加入QQ群组
  • 关注官方微信
关于我们
关于我们
友情链接
联系我们
帮助中心
运营理念
注册说明
获取硬币
服务说明
社区规范
免责声明
账户安全
关注我们
官方微博
官方空间
官方微信
诚信网站 可信网站 - 全球融资租赁领域的联结者 | 津ICP备14004695号 | 津公网安备12011102000780号
  
快速回复 返回顶部 返回列表