CSS 通过伪类 nth-child 和 nth-of-type 实现奇偶选择器的区别

导读

• 本文先通过两个比较全面的实战代码示例，向大家展示:nth-child和:nth-of-type的基本使用方法；
• 然后，对比分析示例结果，做出文中提到的这两个伪类的区别。

语法介绍

个人理解，这两个伪类都是函数式的，都有一个参数，语法格式如下：

:nth-child(n)
:nth-of-type(n)

可以看到它们都有一个参数 n ，它的值有以下三种可能：

• 可以是一个数字，如：1,2,3；
• 可以是一个关键字，如：odd（奇数行）,even（偶数行）等；
• 可以是一个公式，如：2n+1（奇数行），2n（偶数行），-n+3（前三个）等。

:nth-child 示例

代码：

<!-- CSS -->
<style>
    body {
        padding: 60px;
    }

    div {
        width: 300px;
    }

    div p,
    div div {
        margin: 10px 0;
        padding: 6px 2px;
        line-height: 20px;
        background-color: #f8f8f8;
        text-indent: 1em;
    }

    .invalid {
        text-decoration: line-through;
    }

    .list-1st p:nth-child(odd) {
        color: blue;
    }

    .list-1st p:nth-child(even) {
        color: red;
    }
</style>

<!-- HTML -->
<h4 class="hello-world">p:nth-child 示例</h4>
<div class="list-1st">
    <p>1. 奇数行 - P标签</p>
    <div class="invalid">2. 偶数行 - DIV标签</div>
    <p>3. 奇数行 - P标签</p>
    <p>4. 偶数行 - P标签</p>
    <div class="invalid">5. 奇数行 - DIV标签</div>
    <p>6. 偶数行 - P标签</p>
    <p>7. 奇数行 - P标签</p>
    <p>8. 偶数行 - P标签</p>
    <div class="invalid">9. 奇数行 - DIV标签</div>
    <div class="invalid">10. 偶数行 - DIV标签</div>
</div>

结果：

总结（以 p:nth-child(odd) 为例说明）：

• p:nth-child(odd) 样式匹配规则是，首先必须匹配 odd 奇数行元素，其次匹配到的 odd 奇数行的元素类型还必须是 p 标签，必须同时满足这两个条件样式才生效。
• 结合上面的结果截图进行说明，如，第 1，3，7 是奇数行的同时这三行的元素类型是 p 标签，所以样式生效，而第 2、5、9、10 虽然匹配奇偶规则但是它们不是 p 标签，因此样式不生效。

:nth-of-type 示例

代码：

<!-- CSS -->
<style>
    body {
        padding: 60px;
    }

    div {
        width: 300px;
    }

    div p,
    div div {
        margin: 10px 0;
        padding: 6px 2px;
        line-height: 20px;
        background-color: #f8f8f8;
        text-indent: 1em;
    }

    .invalid {
        text-decoration: line-through;
    }

    .list-2nd div {
        background-color: aquamarine;
    }

    .list-2nd p:nth-of-type(odd) {
        color: blue;
    }

    .list-2nd div:nth-of-type(odd) {
        color: red;
    }
</style>

<!-- HTML -->
<h4 class="hello-world">p:nth-of-type 示例</h4>
<div class="list-2nd">
    <p>1. P标签 - 奇数行</p>
    <div>2. DIV标签 - 奇数行</div>
    <p class="invalid">3. P标签 - 偶数行</p>
    <p>4. P标签 - 奇数行</p>
    <div>5. DIV标签 - 偶数行</div>
    <p class="invalid">6. P标签 - 偶数行</p>
    <p>7. P标签 - 奇数行</p>
    <p class="invalid">8. P标签 - 偶数行</p>
    <div>9. DIV 标签 - 奇数行</div>
    <p>10. P标签 - 奇数行</p>
</div>

结果：

总结（以 p:nth-of-type(odd) 为例说明）：

• p:nth-of-type(odd) 样式匹配规则是，首先必须匹配元素类型为 p 标签，然后根据匹配到的结果（也就是 div.list-2nd 的所有元素类型为 p 标签的子元素），再从这个结果元素列表中匹配满足 odd 奇数行的子元素，样式才生效。
• 结合上面的结果截图进行说明，如，先匹配到 div.list-2nd 中所有子元素中 p 标签，然后从这些 p 标签中查找到奇数行元素，给它们设置样式。

:nth-child(n) 与 :nth-of-type(n) 的区别

• 二者都是从父元素的子元素中匹配，或者说从同级兄弟元素中匹配，区别是主要是匹配规则不同；
• element:nth-child（n） 是先根据 n 匹配规则，在此基础上匹配 element；
• element:nth-of-type(n) 是先匹配 element，然后从匹配的结果中根据 n 匹配。