【css3】选择器 :nth-of-type(n)和:nth-child(n) 的区别

最新推荐文章于 2025-06-25 15:41:32 发布
原创 最新推荐文章于 2025-06-25 15:41:32 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文深入解析CSS中的:nth-of-type(n)和:nth-child(n)选择器的使用方法，前者用于匹配同一父元素下特定类型的第n个子元素，后者则匹配所有类型子元素中的第n个。同时介绍了:first-child和:last-child选择器的增强效果，帮助开发者更精准地控制网页样式。

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

:nth-of-type(n) : 在同一父元素下, 同类子元素第n个

:nth-child(n) : 在同一父元素下，所有子元素第n个

搭配以下两个食用效果更佳：

:first-child

:last-child

(1)nth-of-type(n) 

h1标签被忽略，p标签是第几个就是第几个

 

(1)nth-child(n) 

h1标签也被算进去，p标签从上往下排是第几个

 

POST：https://www.w3school.com.cn/cssref/css_selectors.asp

 

详解CSS nth-child与nth-of-type的元素查找方式
09-24
主要介绍了详解CSS nth-child与nth-of-type的元素查找方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解CSS3选择器:nth-child和:nth-of-type之间的差异
12-13
我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下： ...p:nth-child(2) { color: red;...对于:nth-child选择器，在简单白话文中，意味着选择一个元素：
详解css3中的:nth-of-type(n)
热门推荐
冰雪为融的博客
06-04 3万+
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。先来看个简单的例子理解一下上面的意思：HTML代码如下&lt;div id="wrap"&gt; &lt;p&gt;one&lt;/p&gt; &lt;div&gt;我是div&lt;/div&gt; ...
CSS中的nth-child与nth-of-type选择器用法：精准选择元素
最新发布
weixin_41455464的博客
06-25 578
通过今天的讲座，相信大家对nth-child和有了更深入的理解。这两个选择器虽然看起来相似，但在实际使用中有着明显的区别。nth-child更适合用于基于位置的选择，而则更适合用于基于类型的精确选择。最后，给大家留一个小练习：如何使用nth-child或来实现一个带有交替背景色的表格？试试看吧！希望今天的分享对你有所帮助，期待下次再见！?
【CSS】css选择器和css获取第n个元素（:nth-of-type(n)、:nth-child(n)、first-child和last-child）
m0_61049675的博客
02-01 2815
二、:nth-of-type、:nth-child的区别 :nth-of-type(n)：选择器匹配属于父元素的特定类型的第N个子元素 所有兄弟节点中找到第三个p标签背景为红色。所以，3背景为红。 :nth-child(n)：选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 找父元素的第三个子元素，如果该子元素为p，则其变为黄色，如果，第三个子元素不是p元素，则没有子元素的背景变为黄色。 :first-child：获取元素的第 1 个子元素 :last-child：获取元素的最后一个个子元素 效
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4957
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
nth-child(n)和nth-of-type(n)
a44185的博客
01-10 247
目录看代码，猜结果，说原理 看代码，猜结果，说原理 css ul { margin: 100px; } ul li:nth-child(3) { background: tan; } ul li:nth-of-type(2) { background: pink; } html <ul> <p> p1 <p>p3</p>
CSS3中:nth-child和:nth-of-type的区别深入理解
09-25
在CSS3中，`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素，但它们之间存在着微妙的区别，这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...
css :nth-child与:nth-of-type之小解
09-25
总之，理解并熟练运用`:nth-child()`和`:nth-of-type()`选择器对于编写高效且精确的CSS至关重要。在设计网页布局和交互时，根据实际需求选择合适的选择器，能够提高代码的可读性和维护性。同时，考虑到浏览器兼容性...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
css选择器nth-child()和nth-of-type()的应用
weixin_34288121的博客
08-20 299
1 <style> 2 .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { 3 background-color: #f9f9f9; 4 } 5 ...
CSS3 :nth-of-type() 选择器
u011927449的博客
05-03 602
定义和用法 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n可以是数字、关键词或公式。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Documen...
CSS3 nth-of-type(n)选择器
lorry的博客
05-14 425
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是...
关于css3中nth-of-type()的使用
josonho
07-24 1220
nth-of-type(n)选择器用于匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。（ps：n不能为判断语句） p:nth-of-type(n=2) ---------- 错误，不能为赋值语句 p:nth-of-type(n==2)-------- 错误，不能为布尔型 p:nth-of-type(2) ------------- 正确，选取第二个p元素 p...
：nth-of-type（n）和：nth-child（n）的基友关系
黑小Amui的博客
05-22 1万+
一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这两个傻傻难分。。。好了，入正题，其实可以从表面窥视到这两人的”内心“，且称他们为type先生和child先生，他们都以自己为重，顾名思义，type先生会关注type类...
css3伪类选择器nth-of-type,:nth-last-of-type,:first-of-type,:last-of-type,:only-of-type
SBTR123456的博客
12-20 930
1, ：nth-of-type(n) 匹配属于父元素的特定类型的第N个子元素 匹配结果： 2， :nth-last-of-type(n),匹配其父元素下的第N个特定类型的子元素，从后往前 满足条件：1，必须是特定类型 2，从后往前的第N个 3，：first-of-type 4， ：last-of-type匹配其父元素下的最后一个特定类型的子元素 ...
css——nth-child 以及类似的 nth-type-of
fxinn的博客
03-11 316
div div p:nth-child(3) 一直从div往里找，找到最后一个div，数一数里面有n个子节点，将第3个目标拿来匹配是不是p标签，只有是p标签才成功 div div p:nth-type-of(3) 一直从div往里找，找到最后一个div，找到里面的所有p标签，匹配是否有第3个目标，只有有第三个目标才成功 ...
css伪类选择器:nth-of-type(n)和:nth-child(n)的区别
Napster的专栏
05-07 206
与:nth-child都属于css伪类选择器，都是在同级别节点中找到第n个元素，前者是先确定元素类型，再计算n的位置；后者是先确定n的位置，再确定元素类型。
CSS伪类选择器：nth-of-type() 详解
2301_81536938的博客
03-21 796
4</p>换成了<div>4</div>，伪类选择器就没有读取4而是转而读取了后面的<p>5
:nth-child和:nth-of-type区别
10-13
:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于： - :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。 - :nth-of-type(n)选择器选取的是父元素下第n个与该元素类型相同的子元素。 举个例子，假设有如下HTML结构： ```html <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> </ul> ``` 如果我们想选择第2个列表项，可以使用以下两种方式： ```css /* 使用:nth-child */ li:nth-child(2) { color: red; } /* 使用:nth-of-type */ li:nth-of-type(2) { color: blue; } ``` 在上面的例子中，使用:nth-child(2)会选择到第2个子元素，也就是列表项2，而使用:nth-of-type(2)会选择到第2个与该元素类型相同的子元素，也就是同样是列表项的第2个子元素，也就是列表项2。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值