child伪类选择符入门（3）

      前面已经用两篇介绍了first-child、last-child和noly-child三个child伪类选择符，下面我为大家介绍最后两个child伪类选择符nth-child(n)和nth-last-child(n)。

       先看一下E:nth-child(n)，W3C上的说明为：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

       也就是说，这个选择符要把它的选择符E和它的位置结合对应起来才能使用。

       示例一：

       HTML代码：

<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
</div>

       CSS代码：

    p:nth-child(2){color:#f00;}
    p:nth-child(3){color:#f00;}

       结果：

       结果就是第二个P变成个红色，而第三个p并没有变成红色，因为div下第三个child是span元素，并不是p元素，第三个p元素属于div下第四个child元素。选择符没有和元素所在的位置对应起来，所以不会被匹配到。

       （如果想匹配到父元素的第一个E元素，但是不确定第1个子元素是否为E，可以使用E:first-of-type或者E:nth-of-type(1)，我在下面的博客中会单独写一篇出来）。

        如果修改一下CSS就会得到不同的结果：

       示例二：

       CSS代码：

        p:nth-child(2) {color: #f00;}
        span:nth-child(3) {color: #00f;}
        p:nth-child(4) {color: #f00;}

      结果：

       这样第三个child元素为span，所以span:nth-child(3)正好匹配带span标签，变成蓝色，而 p:nth-child(4)匹配到最后一个p标签，变为了红色。

       nth-child(n)还有很多的扩展用法，我们来看一下。

       修改上面的CSS代码：

        p:nth-child(2n) {
            color: #f00;
        }

       这样就只会匹配在偶数位置的元素。2n+1则会匹配在奇数位置的元素。当然也可以使用odd（偶数）和even（奇数）这样的关键之。像这样：E:nth-child(odd).
       然而正相反，E:nth-last-child(n)表示匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。
       同样的，选择符需要和元素所在的位置匹配起来。
       示例三：
    HTML代码：

    <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
    </div>

       CSS代码：

        p:nth-last-child(3) {
            color: #f00;
        }

        span:nth-last-child(2) {
            color: #00f;
        }

        p:nth-last-child(1) {
            color: #f00;
        }

       结果：

       这样，使用nth-last-child(n)只是在数元素的时候倒过来就可以了。用法和nth-child是一样的。

       可能我们会觉得只需要使用nth-child(n)就可以了了，完全没必要使用nth-last-child(n)，其实这是非常错误的想法，有时我们可能需要js向页面中添加标签，这样顺序就会变化，如果只使用nth-child就会造成错误，所以两个结合起来呀才能更完美的解决问题。