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>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
 </ul>

/* 表示下标为1,3,5,7的li标签字体颜色为红色*/
li:nth-child(2n+1) 
{
    color: red;
}

/* 表示下标为2,4,6,8的li标签字体颜色为红色*/
li:nth-child(2n) 
{
    color: red;
}

4.下标变量

变量odd, even是特殊的下标值，分别表示奇数和偶数位置。

/* 表示下标为1,3,5,7的li标签字体颜色为红色*/
li:nth-child(odd) 
{
    color: red;
}

/* 表示下标为2,3,4,8的li标签字体颜色为红色*/
li:nth-child(even) 
{
    color: red;
}

5. 省略表示法

1. 当a=1或者a=-1时，可以省略a,只保留符号
2. 当a=0时，可以省略an部分
3. 当b=0时，可以省略b部分
4. 当b<0时，必须省略加号+

:nth-child(10n+-1) /*无效的语法，必须省略加号*/
:nth-child(10n-1) /*有效的写法*/

6.小结

1）下标从1开始，小于1的计算结果都是无效的

:nth-last-child(an+b)

功能和语法同:nth-child,除了下标计数方式不同。nth-last-child是从后向前计数。

:nth-of-type(an+b)

1. 功能

匹配元素指定位置（an+b计算的结果）且是相同类型的兄弟元素。功能和语法跟:nth-child的唯一区别是：nth-of-type比后者多了个限制条件，即相同标签的兄弟元素才算数。
如HTML片段如：

<div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <p class="item">15</p>
    <p class="item">16</p>
    <p class="item">17</p>
    <p class="item">18</p>
    <p class="item">19</p>
</div>

Style片段：

.item:nth-of-type(2n+1) {
    color: red;
}

显示如下：

:nth-last-of-type(an+b)

nth-last-of-type和nth-of-type的区别就如同nth-last-child和nth-child区别

参考

1. https://www.w3.org/TR/css3-se...