关于css的结构性伪类

Question

关于css的nth-child(1)这样的结构性伪类我有一点很困惑。例如有一个:nth-child()还有一个:nth-of-type说是后者要求是相同类型的元素，前者不管是啥样的元素，只要符合第几个第几个就行。可是我试了一下，前者也是要求符合冒号前面的选择器的呀，例如下面这段代码中，要将ul的第一个子元素标为红色，但由于第一个子元素不是li元素，所以规则失效了1234ulli:nth-child(1){color:red;}而如果是第一个子元素是li元素，规则便会生效123ulli:nth-child(1){color:red;}求大大解惑！

Answer 1

赞同@rosen的说法，也就是说不管是ulli:nth-child(1)还是ulli:nth-of-type(1)最终都是来获取li标签的。区别只是起始索引的位置不同：
:nth-child是从父标签内所有的子元素开始索引，也就是说ulli:nth-child(1)正确的理解应该是在ul标签所有的元素中排位在第一的li标签。这种li在第一个例子中显然是不存在的，所以无效。
:nth-of-type是从父标签内对应子元素开始索引，也就是说ulli:nth-of-type(1)正确的理解应该是在ul标签内所有的li标签的第一个。
所谓的不限制元素是指在排号的时候不限制元素，并不是说在选择器上不限制元素。
                            

Answer 2

nth-child(1)指的是任何元素在父元素中的排位。所以例一中的li在ul中排名最高的只是2，没有排第一的li，所以失败。
:nth-of-type就是在父元素中只选你要的这个元素的排名