CSS3结构伪类选择器

有这么一段样式：

<ul>
   <li>第一个</li>
   <li>第二个</li>
   <li>第三个</li>
   <li>第四个</li>
   <li>第五个</li>
</ul>

如果想选择第一个li，那么就用first-child（第一个孩子）。语法：

ul li:first-child {
    color: red;
}

如果想选择最后一个li，那么就用last-child（最后一个孩子）。语法：

ul li:last-child {
    color: red;
}

如果想选择某一个li，那么就用nth-child(n)。nth-child(n)选择某个父元素的一个或多个特定的子元素！

• n可以为数字、关键词或公式
• n如果是数字，就是选择第n个子元素。里面的数字从1开始……
• n可以是关键字：even偶数，odd奇数
• n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

语法：

ul li:nth-child(2) {
    color: red;
}

意思就是第二个li的颜色改为红色！n如果是数字就代表选中第几个。

语法：

ul li:nth-child(odd) {
    color: red;
}

意思就是第一个、第三个、第五个li的颜色改为红色！（odd选全部奇数行，偶数同理）

语法：

ul li:nth-child(n) {
    color: red;
}

意思就是所有li的颜色改为红色！（n代表全部）

n的公式如下：

nth-child(n)与nth-of-type(n)的区别

先看下面这个例子：

<article>
  <p>光头强</p>
  <div>熊大</div>
  <div>熊二</div>
</article>

当我们书写article div:nth-child(1) {color:red;}会让熊大变颜色吗？答案是不会的！原因是因为nth-child会把所有的盒子都排列序号，代码在执行的时候首先看:nth-child（第一个孩子），之后回去看前面声明的选择器（div）。意思就是说先看的是p标签，因为是第一个孩子。当nth-child执行完毕后回去看前面声明的选择器的时候，发现不是p而是div，第一个孩子与声明的选择器不符合，所有不会变颜色！

而当我们书写article div:nth-of-type(1) {color:red;}会让熊大变颜色吗？答案是会的！原因是因为nth-of-type会把指定的元素的盒子排列序号，执行的时候首先看div（指定声明的元素），之后回去看nth-of-type(1)。意思就是说先看的是声明的div，然后看在div的第几个孩子。所有会变颜色！

nth-child(1)和nth-of-type(1)的执行过程是截然相反的！

总结：

• 结构伪类选择器一般用于选择父级里面的第几个孩子
• nth-child对父元素里面的所有孩子排序选择（序号是固定的）先找到第几个孩子，然后看看是否和E（指定的元素）匹配
• nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
• 关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式
• 如果是无序列表，我们肯定用nth-child更多
• 类选择器、属性选择器、伪类选择器，权重为10