关于css的nth-child(1)这样的结构性伪类我有一点很困惑。例如
有一个:nth-child()
还有一个:nth-of-type
说是后者要求是相同类型的元素，前者不管是啥样的元素，只要符合第几个第几个就行。可是我试了一下，前者也是要求符合冒号前面的选择器的呀，例如下面这段代码中，要将ul的第一个子元素标为红色，但由于第一个子元素不是li元素，所以规则失效了
<ul>
<span>1</span>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
ul li:nth-child(1) {color: red;}
而如果是第一个子元素是li元素，规则便会生效
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
ul li:nth-child(1){color: red;}
求大大解惑！
赞同 @rosen 的说法，也就是说不管是ul li:nth-child(1)还是ul li:nth-of-type(1)最终都是来获取li标签的。区别只是起始索引的位置不同：
:nth-child是从父标签内所有的子元素开始索引，也就是说ul li:nth-child(1)正确的理解应该是在ul标签所有的元素中排位在第一的li标签。这种li在第一个例子中显然是不存在的，所以无效。
:nth-of-type是从父标签内对应子元素开始索引，也就是说ul li:nth-of-type(1)正确的理解应该是在ul标签内所有的li标签的第一个。
所谓的不限制元素是指在排号的时候不限制元素，并不是说在选择器上不限制元素。
亲，加一个id不行么，我写了这么多网页了，基本上伪类就用过:hover和:active，其余从没用过
通俗易懂的给你解释下：
ul li:nth-child(1) {
color: red;
}
表示ul的li标签子元素并且这个元素是ul所有子元素中第一个。
ul li:nth-of-type(1) {
color: red;
}
表示ul的所有li子元素中排第一个的li元素
nth-child(1)指的是任何元素在父元素中的排位。所以例一中的li在ul中排名最高的只是2，没有排第一的li，所以失败。
:nth-of-type就是在父元素中只选你要的这个元素的排名