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

最新推荐文章于 2023-11-02 15:48:04 发布
最新推荐文章于 2023-11-02 15:48:04 发布
阅读量854 收藏 3
点赞数 1
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22744093/article/details/132057801
版权

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

代码：

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

渲染效果：
在这里插入图片描述

科学熊
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
一、代码 <style> ul{list-style: none} div ul li{width:100px;height:30px;border:#eee 1px solid;float:left;} div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <div> <ul> <li>11</li> <li>22</li> <li>33</li> </ul> </div> 二、预览效果 如上图
css怎么设置表格斑马纹效果,利用CSS3选择器实现表格的斑马纹
weixin_35703897的博客
08-03 643
要用到的Css3选择器element:nth-child(number){}选择器匹配属于其父元素的第 number 个子元素 参数 Numberodd 奇数even 偶数完整demo: 测试 #testtable tbody tr:nth-child(odd) { /* 匹配奇数行 */ background-color: ...
CSS中的斑马条纹
大白兔
08-03 4103
表格中的斑马条纹 表格中的斑马条纹很容易实现 你可以使用nth-child来实现： tr:nth-child(even){ background: #E9E9E9; } 也可以使用nth-of-type来实现： tr:nth-of-type(even){ background: #E9E9E9; } 文本中的斑马条纹 那么我们如何实现一段文本行中的斑马条纹效果呢？...
CSS 实现斑马条纹
weixin_30394251的博客
03-25 544
Part.1linear-gradient() linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果；还要定义终止色。 又因为其结果属于<gradient>数据类型，是一种特别的<image>数据类型，所以可以通过background-size...
前端html利用CSS实现table表格斑马纹隔行换色效果
热门推荐
我是Sinlion
09-07 1万+
在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
CSS斑马条纹背景
蜗牛先生
03-21 1308
最近的一道面试题：css实现斑马条纹背景。 ▍效果 ▍源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .container { display: fl...
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
CSS3伪类选择器：nth-child()
12-11
面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
css斑马条纹背景
TanMengyi的博客
03-06 453
** 横条纹 ** 代码： 竖条纹 代码： 斜条纹 代码： 格子花纹 代码：
设置斑马线表格
hannah2233的博客
07-07 1063
制作斑马线表格
html 用css画出斑马线,使用CSS3实现一个斑马线的效果
weixin_34238178的博客
06-21 1563
不得不说CSS是绚烂的，实现一个斑马线效果的方式多种多样。我整理了4种实现斑马线效果的方式，以供学习记录。下面一一介绍。1.使用box-shadow属性。这恐怕是最low的一种实现了。效果：代码：.test1 {position: fixed;top: 0px;bottom: 15px;right: 15px;width: 20px;height: 200px;box-shadow: #67C23...
html 用css画出斑马线,使用css实现斑马线（面试转载）
weixin_34024555的博客
06-21 374
文章原文请参考：(自己练习)页面效果代码附上：html>Document.container{display:flex;flex-wrap:wrap;justify-content:space-around;align-content:space-around;width:1000px;height:900px;}.bg{width:300px;height:200px;...
HTTP请求超时：问题、原因与解决方案
qq_22744093的博客
08-30 6602
重新设置请求头：在发送HTTP请求时，可以修改请求头中的一些字段，以减少HTTP请求的次数。通过设置请求超时阈值、限制请求速度、重新设置请求头、加强网络安全等措施，可以有效降低HTTP请求超时的发生概率。其他可能的解决方案：如使用CDN加速、优化数据库查询等，都可以有效提高请求响应速度，减少超时的发生。设置请求超时阈值：在发送请求前，先设置一个合理的超时时间，以避免长时间等待无响应的请求。重新设置请求头：通过优化请求头，减少HTTP请求的次数，提高请求的效率。
wepy项目小程序开发工具打开报TypeError: Cannot read property ‘mark‘ of undefined
qq_22744093的博客
12-04 5377
wepy项目：将git代码拉去下来，npm run dev，结果报一堆格式错误，将wepy.config.js中的module.exports = { wpyExt: '.wpy', eslint: true, cliLogs: !prod,改为eslint: false，然后世界清静很多。看到eslint就烦。接着用小程序工具打开，报TypeError: Cannot read property ‘mark’ of undefined，接着各种排查，各种对比，头皮发麻。最终发现是小程序工具设置问题： .
npm install报 ERESOLVE unable to resolve dependency tree
最新发布
qq_22744093的博客
11-02 2672
都一切顺利，现在就不行，那很大的可能是npm的版本不同。三四年前的一个项目，打开，
js实现自动执行函数
qq_22744093的博客
06-09 2525
1、setInterval 间隔一段时间执行函数，执行多次（一直执行） js代码： //setInterval方法或字符串 ，毫秒，参数数组（方法的）) setInterval(“showLogin()”,“1000”);//showLogin()函数名一定要带括号2.setTimeout 延迟执行函数，只执行一次 setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 js代码：...
【css】css设置表格样式-边框线合并
qq_22744093的博客
08-02 2127
渲染出来的效果不好看，边框线存在两条，现在需要将它们合并，添加 border-collapse: collapse。
【css】textarea-通过resize:none 禁止拖动设置大小
qq_22744093的博客
08-07 2070
没有设置resize:none。渲染效果：可以拖动设置大小。添加resize:none。
css的nth-child选择器
07-28
:nth-child() 是 CSS 中的一个伪类选择器，用于选取某个父元素下特定位置的子元素。 :nth-child(n) 会选取父元素下第 n 个子元素，无论元素的类型是什么。其中 n 是一个正整数，可以是具体的数字，也可以是关键词（如 even、odd 等）。 例如，如果要选择父元素下的第二个子元素，可以使用 :nth-child(2)。如果要选择父元素下的奇数位置的子元素，可以使用 :nth-child(odd)。 以下是一些使用 :nth-child() 的示例： ```css /* 选择父元素下的第三个子元素 */ .parent-element:nth-child(3) { /* CSS 属性 */ } /* 选择父元素下的偶数位置的子元素 */ .parent-element:nth-child(even) { /* CSS 属性 */ } ``` 需要注意的是，:nth-child() 是基于子元素在文档中的位置进行选择，不考虑其内容或其他属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

科学熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值