前端CSS3学习04 - 结构伪类选择器

介绍

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素。

使用

    <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> 

 01 :first-child  选择父元素中的第一个子元素

      :last-child  选择父元素中的最后一个子元素

/* 01 :first-child 选择ul里面第一个 li*/
ul li:first-child {
    background-color: red;
}

/* 02 :last-child 选择ul里面最后一个 li*/
ul li:last-child {
    background-color: green;
}

运行结果 ：

 02 :nth-child(n)  选择父元素中的一个或多个特定的元素

      n 可以是数字，关键字和公式

      n 如果是数字，就是选择第 n 个子元素，里面数字从1开始....

      n 可以是关键字：even 偶数，odd 奇数

      n 可以是公式：常见的公式如下：

 03 nth-child 与 nth-of-type 的区别

      nth-child 对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看是否和E匹配

      比如：ul li:nth-child(1) 执行时候首先看  :nth-child(1) ，之后再回去看 前面的元素标签是否匹配，如果不匹配则不执行

       nth-of-type  对父元素中指定元素进行排序选择，先匹配E,然后再根据E找第n个孩子

       比如 .box div:nth-of-type(1) 执行时候首先看制定元素，之后再回去看nth-of-type(1)