先看1个简易的案例,最先是HTML一部分:
<section>
<p>我是第1个p标识</p>
<p>我是第2个p标识</p> <!-- 期待这个变红 -->
</section>
随后两个挑选器相对性应的CSS编码以下:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
上面这个事例中,这两个挑选器所完成的实际效果是1致的,第2个p标识的文本变为了鲜红色:
虽然上面两个demo的最终实际效果1致,可是两个挑选器之间存在差别是必定的。
针对:nth-child
挑选器,在简易白话文文中,代表着挑选1个元素:
1、这是个段落元素
2、这是父标识的第2个孩子元素
针对:nth-of-type
挑选器,代表着挑选1个元素:
1、挑选父标识的第2个段落子元素
大家把上面的案例稍作改动,便可以看到这两个挑选器之间的差别主要表现了,以下HTML编码:
<section>
<div>我是1个一般的div标识</div>
<p>我是第1个p标识</p>
<p>我是第2个p标识</p> <!-- 期待这个变红 -->
</section>
還是与上面事例1致的CSS检测编码:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
这时候候两个挑选器所3D渲染的結果就不1样了。
p:nth-child(2)其3D渲染的結果并不是第2个p标识文本变红,而是第1个p标识,也便是父标识的第2个子元素。
p:nth-of-type(2)的主要表现显得很挺立,其把期待3D渲染的第2个p标识染红了。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。