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

最新推荐文章于 2024-03-09 00:46:14 发布

微枫1993

最新推荐文章于 2024-03-09 00:46:14 发布

阅读量1.2w

点赞数 1

分类专栏： web前端文章标签： css3 html

本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/47069301

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<html>
	<head></head>
	<body>
		<ul>
			<li>索引为0，为父元素ul的第一个元素。</li>
			<li>索引为1，为父元素ul的第二个元素。</li>
			<li>索引为2，为父元素ul的第三个元素。</li>
			<li>索引为3，为父元素ul的第四个元素。</li>
			<li>索引为4，为父元素ul的第五个元素。</li>
			<li>索引为5，为父元素ul的第六个元素。</li>
			<li>索引为6，为父元素ul的第七个元素。</li>
			<li>索引为7，为父元素ul的第八个元素。</li>
			<li>索引为8，为父元素ul的第九个元素。</li>
			<li>索引为9，为父元素ul的第十个元素。</li>
		</ul>
		<script type="text/JavaScript" src="../publicJQuery/jquery-2.1.4.js"></script>
		<script type="text/JavaScript">
			$("li:nth-child(3)").css("background","red");
			$("li:nth-child(3n+1)").css("border","2px solid black");
		</script>
	</body>
</html>

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

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

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

微枫1993

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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的第九个元素。索引
复制链接

扫一扫