很多人对于这两个css伪类有时候容易搞混nth-child，nth-of-type

css交集、并集选择器、后代选择器

交集选择器

.aaa.bbb{
color:red;
}

并集选择器

.aaa,.bbb{
color：red;
}

后代选择器

.aaa .bbb{
color:red;
}

伪类选择器:nth-child用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :nth-child(3) {
            color: red;
        }
    </style>
</head>

<body>
    <p>111</p>
    <span>111</span>
    <p>红红红</p>
    <p>111</p>
    <span>111</span>
    <span>111</span>
    <div>
        <span></span>
        <span></span>
        <span>红红红</span>
    </div>
</body>

</html>

我们可以发现带有“红”的都变红了，所以这个伪类选择器的意思是选中 是子元素，并且排第3的元素，第一个变红的p我们可以看作是body的子元素，并且他是排第三个

第二个变红的span我们可以看作是div的子元素，并且他是排第三个

结合交集选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-child(3) {
            color: red;
        }
    </style>
</head>

<body>
    <p>111</p>
    <span>111</span>
    <p>红红红</p>
    <p>111</p>
    <span>111</span>
    <span>111</span>
    <div>
        <span></span>
        <span></span>
        <span>111</span>
    </div>
</body>

</html>

此时选择的元素就很清晰了：选择的是p元素并且是子元素并且是第三个

nth-of-type 这个伪类选择器用于选择每种类型的第几个元素，再结合交集选择器，这个时候就是选择的元素了

我不会写博客，不知道描述的清不清楚，那就这样，下课，附带说一句这个里面的数字可以填n，表示0，1，2，3...

css中的nth-child和nth-of-type

css交集、并集选择器、后代选择器