CSS 通过伪类 nth-child 和 nth-of-type 实现奇偶选择器的区别-HTML/CSS- WEB程序开发笔记

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

原创
作者：程序员三丰
发布时间：2022-09-13 12:12
标签： HTML CSS
浏览量：790

在前端开发项目中，遇到根据奇偶规则设置样式的场景，通常会用过: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 示例

代码：

```

<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>

<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>

```

结果：
![:nth-child 示例结果截图](https://cnd.51blog.xyz/images/mywrite/nth-child%E7%A4%BA%E4%BE%8B%E7%BB%93%E6%9E%9C.png)

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

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

## :nth-of-type 示例

代码：

```

<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>

<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>
```

结果：
![:nth-of-type 示例结果截图](https://cnd.51blog.xyz/images/mywrite/nth-of-type%E7%A4%BA%E4%BE%8B%E7%BB%93%E6%9E%9C.png)

总结（以 `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 匹配。

WEB程序开发笔记

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

文章归档

推荐文章

热门标签

友情链接