详解CSS3挑选器:nth

先看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标识染红了。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。