CSS3之nth-child与nth-of-type_css nth-of-type的n从0开始还是从1开始-优快云博客

本文链接：https://blog.youkuaiyun.com/aiolos1111/article/details/52044730

本文介绍了CSS3中的nth-child与nth-of-type选择器及其在jQuery中的应用,详细解释了这两种选择器的功能与区别，并通过实例展示了如何使用这些选择器来选取特定元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    在css3中，有一系列类似的选择器， 它们在jQuery中也有与之功能相同的用法，所以本文将这些选择器中典型的2个进行说明，这样就同时掌握了css3这类型选择器和jquery这类型选择器的用法。

nth-child与nth-of-type系列选择器

先用表格列出这2类选择器

含义	nth-child类	nth-of-type类
第一个	:first-child	:first-of-type
第n个	:nth-child(n)	:nth-of-type(n)
最后一个	:last-child	:last-of-type
倒数第n个	:nth-last-child(n)	:nth-last-of-type(n)
唯一一个	:only-child	:only-of-type

注：
1、当“:nth-child(n)”和“:nth-of-type(n)”选择器中的n为一个表达式时，其中n是从0开始计算。
2、当表达式的值为0或小于0的时候，不选择任何匹配的元素；
3、参数值的起始值始终是1

上述这条规则通用于“:nth-child(n)”和“:nth-of-type(n)”选择器！！！

本文示例将要用到的html代码如下：

<body>
<!--代码结构: ul>li+div  -->
    <ul>
        <li>我是第1个li元素</li>
        <div>
          我是第1个div元素
        </div>
        <li>我是第2个li元素</li>
        <li>我是第3个li元素</li>
        <div>
          我是第2个div元素
        </div>
        <div>
          我是第3个div元素
        </div>
        <li>我是第4个li元素</li>
        <li>我是第5个li元素</li>
        <div>
          我是第4个div元素
        </div>
    </ul>
</body>

页面效果如下(未加任何css样式)：
这里写图片描述

nth-child与nth-of-type的准确含义

先说明一下nth-child与nth-of-type的准确含义，然后我们用代码具体演示

B:nth-of-type(n)的含义：选择B元素的父元素下的与B同类型元素中的第n个直接子元素为B元素
B:nth-child(n)的含义：选择B元素的父元素下的第n个直接子元素为B元素

下面我们用代码演示一下nth-child(n)的含义：

<style>
/*选择li的父元素下的第2n个直接子元素为li元素*/
    li:nth-child(2n){
      color: blue;
    }
</style>

页面效果如下：
这里写图片描述

li:nth-child(2n)｛｝表示li的父元素下的第2n个直接子元素是li元素时采用的样式，所以：
上图中li的父元素(即ul）下的第2个、第6个子元素是div，所以不采用样式；
上图中li的父元素(即ul）下的第4个、第8个子元素是li，所以采用样式；

再用代码演示一下nth-of-type(n)的含义：

<style>
/*选择li的父元素下的、与li同类型的、第2n个直接子元素为li元素*/
    ul li:nth-of-type(2n){
      background: red;
    }
</style>

页面效果如下：
这里写图片描述

li:nth-of-type(2n)表示li的父元素(即ul）下的、与li同类型的、第2n个直接子元素为li元素时采用的样式，所以：
上图中li的父元素(即ul）下的第2个子元素是div，所以不采用样式
上图中第一个采用样式的li元素是其父元素(即ul）下、与li同类型的、第2个直接子元素（但这个元素是ul下第3个直接子元素）

nth-child与nth-of-type的二种用法

上述两例已经是nth-child与nth-of-type的最常见用法了，下面我们采用表格对比看看它们的2种用法：

A(空格):nth-child/nth-of-type(n)用法

类型	A(空格):nth-of-type	A(空格):nth-child
用法	`ul :nth-of-type(2n){background: red;}`	`ul :nth-child(2n){color: blue;}`
含义	所有元素是其父元素ul下的、同类型的、第2n个直接子元素	所有元素是其父元素ul下的第2n个直接子元素
页面效果
定义	A(空格):nth-of-type表示A元素下每一类型子元素中，第2n个元素的样式	A(空格):nth-child表示A元素下的第2n个子元素的样式

A:nth-child/nth-of-type(n)用法

类型	A:nth-of-type	A:nth-child
用法	`li:nth-of-type(2n){background: red;}`	`li:nth-child(2n){color: blue;}`
含义	当li是其父元素下的同类型子元素中的第2n个时的样式	当li是其父元素下的第2n个子元素时的样式
页面效果
定义	A:nth-of-type表示当A元素是其父元素下的同类型元素中的第2n个时的样式	A:nth-child表示当A元素是其父元素下的第2n个子元素时的样式

Jquery中的用法

非常幸运的是，在jquery中:nth-child和:nth-of-type的用法与上述完全相同，在此，只列举其在jquery中的用法如下：

 $("ul li:nth-child(2)").hide();
 $("p:nth-of-type(3)").css("background-color","yellow");

总结

1、:nth-child与:nth-of-type选中的元素都是紧挨冒号前的元素

2、nth-child与nth-of-type的2种用法

类型	A:nth-of-type	A:nth-child
用法	`li:nth-of-type(2n){background: red;}`	`li:nth-child(2n){color: blue;}`
含义	选择li元素的父元素下的、与li同类型元素中的、第n个直接子元素、并且该元素也为li元素	选择li元素的父元素下的、第n个直接子元素、、并且该元素也为li元素

类型	A(空格):nth-of-type	A(空格):nth-child
用法	`ul :nth-of-type(2n){background: red;}`	`ul :nth-child(2n){color: blue;}`
含义	选择ul下的所有元素、这些元素是其父元素ul下的、同类型中的、第2n个直接子元素	选择ul下的所有元素、这些元素是其父元素ul下的第2n个直接子元素