详解：nth-last-of-type(2) nth-of-type(2) nth-child(2) 6 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box1 p:nth-child(2)
        {
            color: blue;
        }
        .box1 p:nth-of-type(2)
        {
        color: blue;
        }
        .box1 p:nth-last-of-type(2)
        {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <h3>aa</h3>
        <p>2</p>
        <p>3</p>
        <a href="">aaa</a>
        <p>4</p>
    </div>
</body>
</html>

核心：第一个所在的元素的最后开始数，可以不连续，倒数第二个p
可以不连续的第二个p
必须连续的第二个p

posted @ 2020-04-24 22:25  贵哥的编程之路  阅读(20)  评论(0)    收藏  举报