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

news/2024/12/22 20:15:28/

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>

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


http://www.ppmy.cn/news/1001885.html

相关文章

如何将服务开放给用户:构建 API 接口和用户认证的实践指南

如何将服务开放给用户&#xff1a;构建 API 接口和用户认证的实践指南 &#x1f680; 在今天的博客中&#xff0c;我们将探讨一个非常重要且有趣的话题&#xff1a;如何将你的服务开放给用户&#xff1f;无论是构建Web应用、移动应用还是其他服务&#xff0c;开放API接口和用户…

【2023 华数杯全国大学生数学建模竞赛】 C题 母亲身心健康对婴儿成长的影响 Python代码实现

【2023 华数杯全国大学生数学建模竞赛】 C题 母亲身心健康对婴儿成长的影响 1 题目 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c; 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、压力等…

1344:最小花费(最短路)---信息学奥赛一本通

【题目描述】 在n个人中&#xff0c;某些人的银行账号之间可以互相转账。这些人之间转账的手续费各不相同。给定这些人之间转账时需要从转账金额里扣除百分之几的手续费&#xff0c;请问A最少需要多少钱使得转账后B收到100元。 【输入】 第一行输入两个正整数n,m&#xff0c;分…

许战海咨询方法论系列白皮书在京隆重发布

新时代&#xff0c;面对剧烈变化的竞争环境&#xff0c;企业如何实现结构性增长&#xff1f; 7月31日&#xff0c;许战海咨询最新研究成果——《主品牌进化战略》、《第二招牌增长战略》、《链主品牌&#xff1a;制造业的竞争之王》三本核心方法论白皮书&#xff0c;重磅发布。…

数据结构----c语言复习

数据结构----c语言复习 一.类型 1.类型的种类 char 1个字节 范围-128~127 short 2个字节 范围-32768~32767 int 4个字节 范围-2147483648~2147483647 long 4个字节 范围-2147483648~2147483647 float 4个字节 有效位为6~7位 float 8个字节 有效位为15~16为 unsigned c…

HandleAllMethodExceptions

目录 1 HandleAllMethodExceptions 1.1 OnMethodExecutedAsync 1.2 OnMethodExecuting 1.3 OnMethodExecutingAsync HandleAllMethodExceptions using System; using System.Threading.Tasks; namespace Flatwhite.Core.Tests.Attributes { public class HandleAl…

【设计模式——学习笔记】23种设计模式——命令模式Command(原理讲解+应用场景介绍+案例介绍+Java代码实现)

文章目录 案例引入介绍基础介绍登场角色 案例实现案例一实现 案例二介绍实现拓展 命令模式在JdbcTemplate源码中的应用总结文章说明 案例引入 有一套智能家电&#xff0c;其中有照明灯、风扇、冰箱、洗衣机&#xff0c;这些智能家电来自不同的厂家&#xff0c;我们不想针对每一…

微信小程序使用mp-html遇到的问题并解决

1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具-->构建npm 然后就报错了 于是搜索到以下的内容&#xff1a; 没有找到可以构建的NPM包&#xff0c;请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…