07HTML5学习之表格练习02CSS3结构化伪类

1 题目介绍

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

2 步骤拆解

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

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

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

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

3. 效果图如下：
   

3 代码总结

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