child伪类选择符入门（1）

        经过我一段时间的学习，我对伪类选择符中的child选择符有了一定的理解，今天和大家分享一下。

child伪类选择符共有first-child、last-child、only-child、nth-child(n)、nth-last-child(n)五种，下面我就分别为大家介绍一下。

        首先是first-child和last-child，这是最简单的两个child伪类选择符。其中E:first-child在W3C上的介绍是匹配父元素的第一个子元素E。而E:last-child刚好相反，是匹配父元素的最后一个子元素E。

        示例1：

        HTML代码：

    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>

        CSS代码：

    li:first-child {
           color: red;
     }
        
    li:last-child {
           color: aqua;
    }

        显示结果：

        在这个示例中，我们可以看到li:first-child会匹配ul下的第一个li元素，并把它变为红色，而li:last-child会匹配ul下的最后一个li元素，并把它变为浅绿色。

        如果再在下面写一组也会得到相同的结果。

        我们把HTML下面添加一些代码，CSS代码不变看一下：

        示例2：

        HTML代码：

    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
    <div>
        <ol>
            <li>列表项一</li>
            <li>列表项二</li>
            <li>列表项三</li>
            <li>列表项四</li>
        </ol>
    </div>

        CSS代码：

    li:first-child {
           color: red;
     }
        
    li:last-child {
           color: aqua;
    }

        添加了一个div元素，下面添加了ol子元素，然后3个li元素，结果如下：

        同样第一个li元素被变为了红色，最后一个li元素被变为了浅绿色。可以看出只要li是父元素的第一个或最后一个子元素，不管它在哪里，都可以匹配。

        当然我们可以通过关系选择符使选择的更加精确。例如在示例2的基础上对CSS做一些简单的改动。

        示例3：

        CSS代码：

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

        结果：

        这样只匹配上面的不会匹配下面的，就会有很广泛的应用了。

        E:first-child和E:last-childhe是匹配父元素的第一个子元素E，如果不是第一个子元素就匹配不了了。

        示例4：

        HTML代码：

    <div>
        <h2>我是一个标题</h2>
        <p>我是一个p</p>
        <b>我是一个b</b>
    </div>

        CSS代码：  

    p:first-child {
        color: red;
    }
        
    p:last-child {
        color: aqua;
    }

        结果：

        p元素是第二个，既不是第一个也不是最后一个，所以和CSS不会有任何匹配。

        但是如果修改一下CSS，就可匹配了。

        示例5：

         CSS代码：

    h2:first-child {
        color: red;
    }
        
    b:last-child {
        color: aqua;
    }

       希望大家能熟练的运用first-child和last-child选择符，这会让你的CSS代码写起来更加灵活多样，也可以减少id和class的使用，免去很多的烦恼。下面我还会介绍其它的child伪类选择符的使用，敬请关注。