【css】nth-child选择器实现表格的斑马纹效果

nth-child() 选择器可以实现为所有偶数(或奇数)的表格行添加css样式,even:偶数,odd:奇数。

代码:

xml 复制代码
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}//基数偶数子元素选择器
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zuckerberg</td>
    <td>$250</td>
  </tr>
</table>

</body>

渲染效果:

相关推荐
小堃学编程34 分钟前
前端学习(3)—— CSS实现热搜榜
前端·学习
Wannaer44 分钟前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
不灭锦鲤1 小时前
xss-labs靶场基础8-10关(记录学习)
前端·学习·xss
Bl_a_ck1 小时前
--openssl-legacy-provider is not allowed in NODE_OPTIONS 报错的处理方式
开发语言·前端·web安全·网络安全·前端框架·ssl
懒羊羊我小弟1 小时前
手写符合Promise/A+规范的Promise类
前端·javascript
互联网搬砖老肖1 小时前
Web 架构之负载均衡会话保持
前端·架构·负载均衡
肥肥呀呀呀2 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter
Zero1017133 小时前
【React的useMemo钩子详解】
前端·react.js·前端框架
养军博客3 小时前
spring boot3.0自定义校验注解:文章状态校验示例
java·前端·spring boot
uperficialyu3 小时前
2025年01月10日浙江鑫越系统科技前端面试
前端·科技·面试