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

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

以用例来说：

HTML的代码：

我是第一个孩子

我是一个标题头



我是子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 //把div 改成
        
    

再次运行下结果如下：

完美！这是为啥？

解释：

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

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

验证：

 

        
我是第一个孩子
        

            aaa
        
        

            
 bbb 
        
        

            ccc
            cccc
        
        

            

                

                    ddd
                
            
        
    

运行结果：

完全验证了我的理解