CSS3:nth-child(n)与nth-child(2n+1)中n的区别。


	
	
		
  • 索引为0,为父元素ul的第一个元素。
  • 索引为1,为父元素ul的第二个元素。
  • 索引为2,为父元素ul的第三个元素。
  • 索引为3,为父元素ul的第四个元素。
  • 索引为4,为父元素ul的第五个元素。
  • 索引为5,为父元素ul的第六个元素。
  • 索引为6,为父元素ul的第七个元素。
  • 索引为7,为父元素ul的第八个元素。
  • 索引为8,为父元素ul的第九个元素。
  • 索引为9,为父元素ul的第十个元素。

上诉代码运行之后的效果为:

CSS3:nth-child(n)与nth-child(2n+1)中n的区别。_第1张图片

w3c中的解释为:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

也就是说()里面最终计算出来的是父元素下的第N个子元素,那么如此,对于nth-child(n)里面的n,可以直接理解为第N个子元素;对于nth-child(3n+1)里面的n则可以理解为是从0开始的索引,最终的结果为父元素下的第1,4,7,10个子元素。

你可能感兴趣的:(web前端)