0420-序选择器

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type  选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序选择器</title>
    <style>
        /*
        p:first-child{
            color: red;
        }
        */
        /*
        p:first-of-type{
            color: blue;
        }
        */
        /*
        p:last-child{
            color: red;
        }
        */
        /*
        p:last-of-type{
            color: blue;
        }
        */
        /*
        p:nth-child(3){
            color: red;
        }
        */
        /*
        p:nth-of-type(3){
            color: blue;
        }
        */
        /*
        p:nth-last-child(2){
            color: red;
        }
        */
        /*
        p:nth-last-of-type(2){
            color: red;
        }
        */
        /*
        p:only-child{
            color: purple;
        }
        */
        /*
        p:only-of-type {
            color: red;
        }
        */
        .para:only-of-type {
            color: red;
        }
    </style>
</head>
<body>

<p class="para">我是段落1</p>
<div>
    <p class="para">我是段落2</p>
    <p class="para">我是段落2</p>
    <h1>我是标题</h1>
</div>
</body>
</html>