CSS3-选择器-结构化伪类
Posted 前端程序人生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3-选择器-结构化伪类相关的知识，希望对你有一定的参考价值。
结构化伪类(Structural pseudo-classes)选择器
结构化伪类选择器是基于DOM元素在DOM树中的结构特性(跟父节点或者兄弟节点的关系)进行匹配选择，比如某个元素的第一个子节点，最后一个节点等等。
:nth-child(an+b)
1. 功能
nth发音/enθ/，表示第n个。匹配元素指定位置（an+b计算的结果）的兄弟元素。“位置”也可以称为下标，下标从1开始，并且计数方式是从前到后（跟:nth-last-child相反）。下标值等于表达式an+b的计算结果。
2. 语法
:nth-child(an+b)在下标计算表达式an+b中：
a,b是系数可以是任意整数；
n就是个字面量“n”，表示是递增变量，并且取值是从0开始的整数。
如a=3, b=1，则计算的下标有（n从0开始递增）：
n=0 -> 3 * 0 + 1 = 1
n=1 -> 3 * 1 + 1 = 4
n=2 -> 3 * 2 + 1 = 7
...
即匹配下标为1,4,7...的兄弟元素。
如a=-3, b=1，则计算的下标有：
n=0 -> -3 * 0 + 1 = 1
n=1 -> -3 * 1 + 1 = -2（结果值小于1，无效）
n=2 -> -3 * 2 + 1 = -5（结果值小于1，无效）
...
即只匹配下标为1的兄弟元素。
3.举例
我们有一段html:
<ul>