nth-child和nth-of-type的区别

南山月！

已于 2022-06-03 20:08:34 修改

阅读量2.9k

点赞数 3

分类专栏：前端文章标签： html css

于 2022-06-03 20:05:50 首次发布

本文链接：https://blog.csdn.net/wym123_/article/details/125115370

版权

本文详细介绍了CSS中的nth-child和nth-of-type的区别。nth-child选取所有同级元素并按顺序编号，而nth-of-type仅针对同一类型的元素进行选择。通过实例演示，展示了它们在选取和应用样式上的不同，帮助理解这两个伪类的选择逻辑。

摘要由CSDN通过智能技术生成

nth-child定义：(来自MDN)

nth-child总结：

nth-of-type定义:(来自MDN)

nth-of-type总结:

nth-child定义：(来自MDN)

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。

例子一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:nth-child(2n+1){