CSS-----三

简单唠嗑一下今天学的层次选择器和结构伪类选择器（这俩不太重要）
层次选择器：分为四类：
1.后代选择器:某个元素的后面，
body p{
background: red;
}

    2.子选择器：只有一代。
    格式：
    上一辈 箭头指向 下一辈{
       属性名：属性;
       ...
    }
    body>p{
        background: green;
    }
    3.相邻兄弟选择器:同辈，相邻（向下），只选择一个
    格式:
    .类名 + 下一个同辈{ ...  }
    4.通用选择器:当前选中元素下向下所有的兄弟元素

<style>
/* 后代选择器*/
/*

        body p{
            background: red;
        }
*/
/*子选择器*/
/*

        body>p{
            background: green;
        }
       ul>li{
            background: green;
        }
        */
/* 相邻兄弟选择器*/
        /*

        .action +p{
            background:blue;
        }
        */
        /*通用选择器       */

        .action~p{
            background: pink;
        }
    </style>

<!-- 层级结构-->
<p>p1----</p>
<p class="action">p2----</p>
<p>p3----</p>
<ul>
    <li>
        <p>p7------</p>
    </li>
    <li>
        <p>p8------</p>
    </li>
    <li>
        <p class="action">p9------</p>
        <p >p10------</p>

    </li>
</ul>
<p>p11-------</p>
<p>p12-------</p>

结构伪类选择器：（了解）

:nth-child(n) 选择器匹配父元素中的第 n 个子元素