作用:
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>变绿