:nth-child(n)的一些理解

:nth-child(n)   对于一个从安卓转前端的人来说很容易理解错，我先不不说这个字段怎么理解。

以用例来说：

HTML的代码：

<div class="div test">

<div>我是第一个孩子</div>

<h2>我是一个标题头</h2>

<div>

<div>我是子div</div>

</div>

</div>

CSS的代码：

.div.test div:nth-child(1) {
    height: 200px;
    width: 200px;
    background-color: blue;
}

.div.test div:nth-child(3) {
    height: 200px;
    width: 200px;
    background-color: black;
}

我本想让在class为div.test DIV 下第一div和第二个div的背景色分别为blue 和 black,看到这里有些人会问你让第二个div变black，为什么nth-child(n）中的n=3,而不是等于2。

解释：

这是我的第一个错误理解，看W3c上也没有说明，他这个n是指对于div.test DIV 下所有的子元素，不包含孙子节点等（暂且这么讲，因为后面还会出问题）。

好，现在运行下，看结果：

啥鬼？怎么回事，css上面明明显示的第二个div的背景色应该是black的呀，为啥变成蓝色了，子类也没设计大小和背景色呀。我们把HTML改一下

  <div class="div test">
        <div>我是第一个孩子</div>
        <h2>我是一个标题头</h2>
        <div>
            <span style="display: inline-block">我是子div</span> //把div 改成<span></span>
        </div>
    </div>

再次运行下结果如下：

完美！这是为啥？

解释：

:nth-child(n)  我是这么解释的：这个是相当于当前节点中，所有子节点（包含父子 ，子孙，等等）中的第n个元素。

div:nth-child(n)  这样的话，还是一样的意思，只是相当于加了个刷选条件，刷选条件为选择的元素必须为div元素。

验证：

 <div class="div test">
        <div>我是第一个孩子</div>
        <div>
            <span style="display: inline-block">aaa</span>
        </div>
        <div>
            <div> <span>bbb</span> </div>
        </div>
        <div>
            ccc
            <span>cccc</span>
        </div>
        <div>
            <div>
                <div>
                    <span>ddd</span>
                </div>
            </div>
        </div>
    </div>

运行结果：

完全验证了我的理解