学习记录307@CSS3中nth-child()不起作用的问题

最新推荐文章于 2023-09-19 10:30:00 发布

教练我想学编程

最新推荐文章于 2023-09-19 10:30:00 发布

阅读量8.6k

点赞数 11

本文链接：https://blog.youkuaiyun.com/weixin_44663675/article/details/108451899

版权

本文详细解析了CSS中的nth-child()选择器的工作原理，通过实例展示了如何选择父元素中特定位置的子元素，区分了不同类型的子元素，并解释了如何结合子选择器进行精确选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看下面的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 被变为红色的是第几个p? */
			div p:nth-child(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">链接也算位置</a>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
	</body>
</html>

在这里插入图片描述
最开始我以为会是第二个p变为红色，但是结果是第一个p，为什么呢？
因为我对nth-child()的定义没有理解清楚，我理解的是直接在父级div中选择第二个p，但是这样理解并不正确。
准确的定义是：nth-child()选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。
但是这个准确的官方定义也不好理解，我目前的理解是，选择冒号前的这个元素的同级元素的第几个元素，比如上面的例子就是选择与p元素同级的元素，这里就是a和另外两个p，这个级别整体有一个a和三个p，然后选择第二个元素，就是数字1。注意优先限定的是冒号前面的那个元素，再找这个元素的同级元素。
按照上面的理解，再看一个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 被变为红色的是第几个p? */
			.div1 p:nth-child(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<a href="#">链接也算位置</a>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<div class="div2">
				<p>4</p>
				<p>5</p>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
按照上面的理解，选择div1下的与p同级的第二个元素，因为div1下的div2下也有p，因此分为了两个部分，分别选取这两个部分的第二个元素，这样1和5都会被标红。
如果想要只选择div1下面的p的同级元素呢？使用子选择器，>表示只选择亲儿子元素，而不管孙子元素。

.div1>p:nth-child(2){
				color: red;
			}

扩展

在这里插入图片描述