:nth-child()和:nth-of-type()选择器的区别

最新推荐文章于 2026-04-30 01:12:17 发布

原创最新推荐文章于 2026-04-30 01:12:17 发布 · 768 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了CSS中的一些关键伪类，如:nth-child、:nth-of-type等的选择器使用方法及其应用场景，帮助读者更好地掌握这些选择器，提升网页布局的灵活性。

p:nth-child(2) 要求该元素是p元素，且是父元素的第二个子元素

p:nth-of-type(2) 要求该元素是父元素下的第二个p元素

类似的还有，

:nth-last-child、:nth-last-of-type

:last-child、:last-of-type

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mengyayeah

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决redhat8/centos8无法使用yum问题（报错：This system is not registered to Red Hat Subscription Management）

qq_43569119的博客

04-15

4321

解决redhat无法使用yum问题、以及替换repo文件后仍无法使用yum的问题

参与评论您还未登录，请先登录后发表或查看评论

基于Simulink的自适应反步法（Adaptive Backstepping）控制

xiaoheshang_123的博客

03-22

本文针对非线性系统控制中未知参数和强非线性耦合的挑战，提出基于Simulink的自适应反步法解决方案。通过融合参数在线估计与反步递归设计，该方法显著提升了永磁同步电机(PMSM)速度控制的鲁棒性，使跟踪误差从20%降至3%，参数估计收敛时间小于0.5秒。文章详细阐述了从算法推导到Simulink实现的完整流程，包括系统架构设计、核心算法推导（以PMSM为例）、模块化建模方法、参数优化策略以及工程部署建议。提供的自适应控制器MATLAB代码和关键参数表可直接应用于实际工程，为电机驱动、机械臂等非线性系统控制提

nth-child 实用技巧

大概关于

01-16

6886

nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。 选择器是什么类似： #container 选择页面上 id 为 container 的元素 .wrapper 选择别面上 class 为 wrapper 的元素 p 选择页面上所有 p 元素 … nth-child 同以上这些一样，只不过没那么常见...

AI Agent Harness Engineering 的“热插拔”能力：模块化设计思路

最新发布

AI天才研究院

04-30

464

本文我会结合我在大厂做AI Agent平台的实战经验，从核心概念、架构设计、代码实现、落地实战多个维度，给大家详细讲解AI Agent Harness Engineering的核心能力——热插拔的模块化设计思路。我们会从问题根源出发，一步步搭建一个完整的支持热插拔的Agent Harness框架，包含组件抽象、注册中心、生命周期管理、配置驱动、容错机制等核心模块。

详解CSS3中:nth-child的用法

aa_mmnn的博客

09-10

2233

CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！（1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同 .demo01 li:nth-child(n+4){background:#090} （2）:nth-child(-n + 4)选取小于等于4的标签 .demo01 li:nth-child(-n+4){background:#090} （3）:nth-child(2n)选取偶数标签，其中的2n也可以写

nth-of-type() 详解

weixin_44051815的博客

12-29

1万+

nth-of-type() 详解 ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。 <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; margin: 100px auto; border: 1px solid #ccc; }

nth-of-type的属性和用法

qq_51735681的博客

02-05

1万+

nth-of-type的属性和用法一、先来介绍一下nth-child(n)的弊端：我们可以先给一个div盒子，然后里面放上一些行内元素作为研究对象。代码如下： <div> <p>你好</p> <span>我是1span</span> <span>我是2span</span> <span>我是3span</span> </div&

CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child

MFWSCQ的博客

07-01

5049

CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...

选择器 :nth-child()和nth-of-type()区别

qiaoqiaoBigBoss的博客

04-26

220

区别： p:nth-child(n) 表示其父元素的第n个子元素是否是p, 如果是，则有匹配元素，否则无匹配元素 p:nth-of-type(n) 表示其父元素的第n个子元素p 事例 <style> div p:nth-child(5) { background: pink; //不生效，没有匹配元素，因为div的第5个子元素不是p,是h1 } div P:nth-of-type(5) { background: pink; //生效的的是 <p>我是五哥</p&

css伪类选择器中:nth-child()和:nth-of-type()的区别

qq_57205669的博客

04-07

643

简单的html标签 <p class="ni">段落1</p> <p class="ni">段落2</p> <p class="ni">段落3</p> <p>段落4</p> <span class="ni">span1</span><span class="ni">span2</span> <span class="

关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别...

weixin_33881140的博客

01-26

193

2019独角兽企业重金招聘Python工程师标准>>> ...

java与jquery的选择器区别_关于jquery选择器中:first和:first-child和:first-of-type的区别及:nth-child()和:nth-of-type()的区别...

weixin_31733409的博客

02-25

163

:first：选择第一个出现符合的元素:first-child：选择限制条件中的第一个元素，并且必须和冒号前面的标签一致:first-of-type：选择所有限制条件下的第一个冒号前面的标签元素，此标签可以不是第一个测试:first代码：123Hello1Hello2Hello3Hello4Hello5Hello6$(function(){$zzz=$("p:first").text();aler...

css选择器中:nth-child()和:nth-of-type()简洁明了的区别

qq_39498924的博客

07-14

406

以https://bj.fang.lianjia.com/loupan/p_ycyxhfaawyk/huxingtu/1120032477145011.html为例，观察.news-glob > div:nth-child(10)和.news-glob > div:nth-of-type(10)的区别。实验发现： div:nth-child(10)：是选择第10个子节点（按顺序看所有子节点），若第10个子节点是div节点，则返回该节点，若该节点不是div节点，则返回空。 div:nth-of-

li:nth-child()和 li:nth-of-type()选择器区别

weixin_30240349的博客

07-20

315

.demo li:nth-child(2)：表示demo下面第二个元素，若此元素不是li,则选择失败。.demo li:nth-of-type(2)：表示demo下面第二个li元素。转载于:https://www.cnblogs.com/lily2015/p/4661244.html...

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别

weixin_43373383的博客

02-24

1828

css中nth-last-of-type()和nth-last-child()、last-of-type和 last-child 以及nth-child()、nth-of-type()的区别 nth-last-of-type() <!DOCTYPE html> <html> <head> <title>css3</title> <style type="text/css"> /* div下倒数第二个子

css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

weixin_30443731的博客

01-05

303

p:nth-child(2) 要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2) 选择父元素下的第二个p元素转载于:https://www.cnblogs.com/jingxinqiaodaima/p/6252...

CSS3中：nth-child和：nth-of-type的区别深入理解

lonecry的博客

02-21

1万+

1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。 ...

css中nth-child()与nth-of-type()区别

热门推荐

Aifangmy的博客

06-16

3万+

nth-child() dom.nth-child(n) 表示选中dom的父级元素中的第n个dom元素，若匹配，则选中，否则，不选中。上面例子可以看出： p:nth-child(1) ：拿出p元素的父级元素div中的第一个子元素，对比是p元素，选中。 p:nth-child(2) ：拿出p元素的父级元素div中的第二个子元素，对比是p元素，不是p元素，是span，则不选中。 p:nth-child(3) ：拿出p元素的父级元素div中的第三个子元素，对比是p元素，选中。 span:nth-child

[css] css3的:nth-child和:nth-of-type的区别是什么？

歌谣的博客

02-22

550

[css] css3的:nth-child和:nth-of-type的区别是什么？ :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素。 n 可以是数字、关键词或公式。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

:nth-child()和:nth-of-type()的区别

brunya的博客

01-13

812

nth-child()和:nth-of-type()都是css3的伪类选择器先上代码</</</</background;background;</效果图：可以看到伪类选择器和括号中都是2，但指向的却是不同的元素。是因为选中的是.nthDiv子元素中的第二个，并且这个元素是p标签才会生效，而选中的是.nthDiv子元素中的第二个p标签。

[CSS3] :nth-child() / :nth-of-type() 相关选择器

WWF_HelloWorld

10-26

577

文章目录一、:nth-child() / :nth-of-type()区别二、括号中怎么写 `{ an + b; n = 0, 1, 2, ...} `三、常见需求1. 第一个2. 前3个3. 前3个之后4. 最后一个5. 后3个6. 后3个之前一、:nth-child() / :nth-of-type()区别虽然感觉nth-child用的更多，但是其实nth-of-type()理解起来更单...

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

潜行IT的博客

10-10

7649

:nth-child()表示父元素下的第n个子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素则没有匹配的元素　:nth-of-type()表示父元素下的第ｎ个类型的元素　比如div p:nth-of-type(2)表示div下的第二个ｐ元素。基本代码如下: <!DOCTYPE html> <html> <hea...

固件-CPU 1511C-1 PN -6ES7511-1CK01-0AB0-V2.9.7.zip

固件_CPU 1511C-1 PN _6ES7511-1CK01-0AB0_V2.9.7

西电机器学习课程设计-10个实验项目+源码+文档+报告（高分版本）

西电机器学习大作业，包含10个实验、源代码、文档说明和实验报告，代码含注释，适合新手，可作为课程设计或期末大作业使用，功能完善、界面美观、操作简单、管理便捷，具有较高实际应用价值。资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！