文章目录

• 1 题目介绍
• 2 步骤拆解
• 3 代码总结

1 题目介绍

还是老题目，不知道的戳链接，这次使用CSS结构化伪类来实现“斑马纹”。

2 步骤拆解

1. 利用结构化伪类将样式应用到表格的偶数行中。用tr:nth-of-type(even)语法设置，代码如下：

tr:nth-of-type(even) {
background-color: #eaeaea;
}

1. 接下来利用first-of-type这个伪类把第一行的背景色设置为深灰色，文本为浅灰色，代码如下：

tr:first-of-type {
background-color: #006;
color: #eaeaea;
}

1. 效果图如下：
   

3 代码总结

见Github：代码文件
参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017

• 点赞
• 收藏
• 分享
• 文章举报