结构选择器

  目录

1.选择第一个

2.选择最后一个

3.选择第几个

4.除了满足条件的之外的元素

---

    1.选择第一个

             1.1 父元素>子元素1:first-child {}

                 选择父元素中第一个子元素，并且与子元素1是相同的

            1.2 父元素>子元素1:first-of-type {}

                  先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择第一个子元素1

    2.选择最后一个

            2.1 父元素>子元素1:last-child {}

                选择父元素中最后一个子元素，并且与子元素1是相同的

            2.2 父元素>子元素1:last-of-type {}

            先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择最后一个子元素1

    3.选择第几个

           3.1 父元素>子元素1:nth-child(num) {}

            选择父元素中第num个子元素，并且与子元素1是相同的

           3.2 父元素>子元素1:nth-of-type(num) {}

            先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择第num个子元素1

         注释：num的选值

               odd/2n+1 奇数

               even/2n 偶数

               num1*n+num2  =>从num2开始，以num1为一个循环

     4.除了满足条件的之外的元素

            元素:not(条件)  条件：选择器

代码如下：

       .first>li:first-child>a {

            text-decoration: none;

        }

        .first>li:first-of-type>a {

            text-decoration: none;

        }

       .first>li:last-child {

            background-color: pink;

        }

       .first>li:last-of-type {

            background-color: pink;

        }

        .first>li:nth-child(2) {

            list-style: none;

        }

        .first>li:nth-of-type(2) {

            list-style: none;

        }

       .second>li:nth-child(odd) {

            background-color: pink;

        }

        .second>li:nth-child(even) {

            background-color: gold;

        }