【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>

渲染效果:

相关推荐
边界条件╝7 分钟前
微前端进阶(二)
前端
罗超驿18 分钟前
9.零基础学CSS:元素属性设置(字体、颜色、对齐等)全解析
前端·css
云水一下28 分钟前
JavaScript 从零基础到精通系列:流程控制、函数与作用域
前端·javascript
柚子科技1 小时前
Vue3 响应式原理:我被 ref 和 reactive 坑了3次后终于搞懂了
前端·javascript·vue.js
大鱼前端1 小时前
Veaury:让Vue和React组件在同一应用中共存的神器
前端·vue.js·react.js
scan7241 小时前
大模型只是知道要调用工具,本身不
前端·javascript·html
云水一下2 小时前
CSS3从零基础到精通(一):前世今生与基础入门
前端·css3
顾凌陵2 小时前
CSRF&SSRF漏洞攻击的溯源分析与实战
前端·csrf
月月大王的3D日记2 小时前
Three.js 材质篇(中):从兰伯特到PBR,一篇文章看懂五种光照材质
前端·javascript