1 前言
今天在学习flex布局时，使用了:nth-childCSS选择器，使用到后面发现与我理解的有所偏差，经过不断学习，终于弄懂该选择器。言归正传，下面我来讲解该选择器。
2 简单理解
- 我们先来看一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child</title>
<style>
p:nth-child(2) {
background-color: red;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
</body>
</html>
- 效果图如下，这样会让我们产生一种错觉：
p:nth-child(2)是选择body体下第二个子元素为p标签元素。
3 问题引入
- 那我们在来看一段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child</title>
<style>
p:nth-child(2) {
background-color: red;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>444</p>
<p>555</p>
</div>
</body>
</html>
- 效果图如下，我们发现，555也被选择了。因此
p:nth-child(2)选择的是第二个子元素为p标签的元素。
3 进阶
理解了nth-child选择器后，我们可以通过配合其他选择器来精准选择元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child</title>
<style>
/*选择父元素为div、第二个子元素为p的元素*/
div p:nth-child(2) {
background-color: red;
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
<p>444</p>
<p>555</p>
</div>
</body>
</html>
效果图如下
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
