董桃利

摘要：随着网页技术的发展，在整个网站开发过程中，前端开发技术得到了广大编程学习者的追捧，CSS3是前端技术的基础也是核心，然而很多编程者在使用CSS3结构化伪类选择器时经常编码出错，该文结合实例由浅及深的对CSS3结构化伪类选择器进行阐述。

关键词：前端技术；CSS3；结构化选择器

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9416（2018）04-0168-01

随着网页技术的发展，在整个网站开发过程中，前端开发技术得到了广大编程学习者的追捧，CSS3是前端技术的基础也是核心，CSS选择器又是CSS的重中之重。结构化伪类选择器是CSS3中新增的选择器，CSS3与HTML5完美结合可以满足不同用户的需求，结构化选择器越来越受到编程爱好者的喜爱，然而在应用过程中常常出现一些小问题导致编码错误，使学习者不知所措。在前端技术开发中，CSS3常用的结构化伪类选择器有以下几种：文档根元素选择器：root；排除结构元素选择器：not；唯一子元素选择器E：only-child；first子元素选择器E：first-child；last子元素选择器E：last-child；子元素选择器E：nth-child（n）；个子元素选择器E：nth-of-type（n）；空元素选择器E：empty；超链接目标元素选择器E：target。本文主要对前端页面开发中用途最广、使用最频繁、最容易混肴出错的E：nth-of-type（n）和E：nth-child（n）选择器进行剖析阐述。

1 子元素选择器E：nth-of-type（n）

在E：nth-of-type（n）中，n通常的取值有三种情况。第一种：n取值为整数；第二种：n取值odd或2n+1表示取奇数；第三种：n取值2n或even表示取偶数。下面以h2：nth-of-type（odd）代码段为例，对E：nth-of-type（n）代码进行解读剖析：在执行过程中，首先，是寻找代码段h2：nth-of-type（odd）的父元素标签；其次，查找代码段h2：nth-of-type（odd）父元素的所有h2子元素，即h2：nth-of-type（odd）的所有亲兄弟元素，并对其进行排序（排序结果如表1-1所示）；……