CSS3中：nth-child和：nth-of-type的区别深入理解

2025-03-10 11:10:03

推荐回答（3个）

回答1：

ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。

 
 
zero
 
one
 
two

.demo li:nth-child(2)选择的是

one

节点，而.demo li:nth-of-type(2)则选择的是

two

节点。

回答2：





1




	第1个p

	第2个p

    第3个p

	第4个p

	第1个span
    第5个p

    第3个span
	第6个p

    第7个p

	第2个span

不知道以上代码你是否能看明白, nth-of-type的时候, 只计算p的数量, 忽略span, 如果是nth-child的时候, 全部计算, 我是这么理解的, 也不知道是否准确

回答3：

p:nth-child(2)将选中第一个p
p:nth-of-type(1)将选中第一个p
这就是却别