CSS3中nth-child的选择范围

<style>
        p {
            color: purple;
        }
        
        .test {
            color: skyblue;
            margin: 10px;
        }

        .test:nth-child(2) {
            color: red;
        }
    </style>

	<p>我是p标签</p>
    <div class="test">我是test</div>
    <div class="test">我是test</div>
    <div class="test">我是test</div>
    

上面代码在浏览器运行结果：

可以看到，选择了.test:nth-child(2) 为第二个子元素，但标红的却是.test类的第一个元素。下面我们把 .test 类用一个父盒子包裹：

<style>
        p {
            color: purple;
        }
        
        .test {
            color: skyblue;
            margin: 10px;
        }

        .test:nth-child(2) {
            color: red;
        }
    </style>

	<p>我是p标签</p>
    <div>
        <div class="test">我是test</div>
        <div class="test">我是test</div>
        <div class="test">我是test</div>
    </div>
    

输出结果：

.test:nth-child(2) 选择了 3个.test 盒子中的第2个盒子，这是因为没用父盒子包裹的情况下，选择器nth-child()以body为父盒子，而body的第2个子元素是第1个.test盒子，选择器就识别了第1个.test。

结论：nth-child()选择器选择的是基于某一个父元素下的子元素，因此在使用该选择器时，外层最好再包裹一个父元素。