作用：
E:nth-child(n)表示定位E的父元素的某些特定子元素
说人话，就是：
step1：找到所有E类型的标签
step2：找到所有E类型标签的父标签【注意，通俗的说父标签就是上一级标签，如果再上一级就是爷标签，咱们不找这个】
<div>
<span>
<p>making paper copies of everything</p>
</span>
</div>【以上面这段代码为例，如果E=p，span标签是p标签的父标签，也就是我们要找的，div我们目前不管】
step3：根据n的值，咱们找到【所有父标签】的【第n个子标签】，
如果这些第n个子标签有和E类型一致的，那么对该标签进行相应操作；
不和E类型一致的那些第n个子标签，咱们不做处理。
具体实例
为不失一般性，我这里多给出了几种类型的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
p:nth-child(1){
background: green;
}
</style>
</head>
<body>
<p>p1</p>
<span>span1</span>
<p>p2</p>
<div>
<p>p3</p>
<span id="span1">
span2:<p>p4</p>
</span>
<span id="span2">
span3:<p>p5</p>
</span>
<p>p6</p>
</div>
<ol>
<li>
<span>span4</span>
<p>p7</p>
</li>
</ol>
<p>p8</p>
</body>
</html>注意到：
p:nth-child(1){
background: green;
}
按照开头给出的step进行操作【这里即是E=p，很好理解】
step1：找出所有的p标签【难度：0颗星】
step2：找出所有p标签的父标签【难度：1颗星】
p1 p2 p8 的父标签为body
p3 p6 的父标签为div
p4 的父标签为id="span1"的span标签
p5 的父标签为id="span2"的span标签
p7 的父标签为li标签
step3：在各个父标签下，找出其第1个子标签【这里是因为p:nth-child(1)中的括号内的数字为1， 即n=1】
那么根据step2找出的信息，
body的第一个子标签为 <p>p1</p>
div的第一个子标签为<p>p3</p>
id="span1"的span标签的第一个子标签为<p>p4</p>
id="span2"的span标签的第一个子标签为<p>p5</p>
li标签的第一个子标签为<span>span4</span>
最后，我们可以知道除了li的第一个子标签类型不是p标签类型，step3中找出的其他所有标签都满足p标签类型这一要求，因此将这些标签的北京颜色置为绿色。
补充：
E:nth-child(n)中的n为正整数，
除了直接为其赋值，如1 2 3 等这类正整数；
也可以赋值式子，如n+1 n-3等，n是正整数，显然，当n+1 n-3为正整数是才有意义
还可以赋值为odd even ，其中odd表示所有奇数，even表示所有偶数
练习：
p:nth-child(6){ background: green; }
当n=6时，谁的背景颜色会变绿？
答：标签<p>p8</p>变绿
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
