css奇数和偶数选择器

前端工作中，分别根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验。实现此功能就要用到CSS的伪类选择器：nth-child()

工具/原料

电脑一台

HTML+CSS

方法/步骤

新建一个HTML文档，用于承载表格和CSS

新建一个5行3列的

表格

保存以上内容，在浏览器中预览效果，如图：

定义一个内联样式，设置

表格的偶数行（even）的背景色为浅灰色，示例：

再次保存以上文件，在浏览器预览效果，表格的偶数行（even）的背景色显示为浅灰色

再次修订内联样式，增加奇数行的背景色为蓝色，示例：

保存以上内容，再次在浏览器预览效果，奇数行（odd）背景色为蓝色，偶数行（even）背景色为浅灰色

注意事项

odd为奇数，even为偶数

喜欢此经验，请投票和点赞

推荐信息

欧尼酱