CSS选择器，nth-child 与 nth-of-type 选择器详解

nth-child 与 nth-of-type 都是CSS3的伪类选择器，两者都是用于 “子代元素”，两者之间的功能差不多，却也存在着一些差异；

例：

<table >
    <tr>
        <th>
            <p>1111111111111111111111111111</p>
            <p>2222222222222222222222222222</p>
            <p>3333333333333333333333333333</p>
            <p>4444444444444444444444444444</p>
            <p>5555555555555555555555555555</p>
            <p>6666666666666666666666666666</p>
            <p>7777777777777777777777777777</p>
            <p>8888888888888888888888888888</p>
            <p>9999999999999999999999999999</p>
        </th>
    </tr>
</table>

修改第二个P标签的背景颜色为红色；

两个选择器的写法：

table tr th p:nth-child(2){
    background-color: red;
}


table tr th p:nth-of-type(2){
    background-color: red;
}

上述两种选择器都能实现 第二个P标签的背景颜色为红色：

*这里要注意：IE8 以及更早版本的浏览器是不支持这个属性的，所以不会出现效果，使用的时候应该注意浏览器的版本；

---

虽然这两个选择器都实现了相同的效果，但是这两个选择器还是存在着一定的差异；

我们将DOM结构稍稍做一下改变在来观察：

<table >
    <tr>
        <th>
            <span>XXXXXXXXXXXXXXXXXXXXXXX</span>
            <p>1111111111111111111111111111</p>
            <p>2222222222222222222222222222</p>
            <p>3333333333333333333333333333</p>
            <p>4444444444444444444444444444</p>
            <p>5555555555555555555555555555</p>
            <p>6666666666666666666666666666</p>
            <p>7777777777777777777777777777</p>
            <p>8888888888888888888888888888</p>
            <p>9999999999999999999999999999</p>
        </th>
    </tr>
</table>

这个时候我们发现，神奇的事情发生了；

nth-child将第一个P标签的背景颜色渲染成了红色，

table tr th p:nth-child(2){
    background-color: red;
}

而 nth-of-type 则正确的将第二个P标签的背景颜色渲染成了红色；

table tr th p:nth-of-type(2){
    background-color: red;
}

---

这里我们将DOM再改变一下，来观察：

<table >
    <tr>
        <th>
            <span>YYYYYYYYYYYYYYYYYYYYYYY</span>
            <span>XXXXXXXXXXXXXXXXXXXXXXX</span>
            <p>1111111111111111111111111111</p>
            <p>2222222222222222222222222222</p>
            <p>3333333333333333333333333333</p>
            <p>4444444444444444444444444444</p>
            <p>5555555555555555555555555555</p>
            <p>6666666666666666666666666666</p>
            <p>7777777777777777777777777777</p>
            <p>8888888888888888888888888888</p>
            <p>9999999999999999999999999999</p>
        </th>
    </tr>
</table>

你会发现，神奇的事情又发生了；

nth-child没有渲染任何标签：

table tr th p:nth-child(2){
    background-color: red;
}

而 nth-of-type 则正确的将第二个P标签的背景颜色渲染成了红色；

table tr th p:nth-of-type(2){
    background-color: red;
}

---

结论：
p:nth-child(2) 选择的是 第二个子元素(元素的位置位于第二个) 并且 类型要为P 才能被正确的选取
p:nth-of-type(2) 选择的是 第二个类型为P的子元素，至于这个P元素，是不是位于第二个并不重要；

知道了nth-child 与 nth-of-type 的区别，再以后子元素的选取过程中，就能够根据实际情况选择更恰当的选择器，避免造成滥用的情况；

感谢阅读，欢迎纠错，转载请注明出处。