css中nth-child()和nth-of-type()的区别

最新推荐文章于 2025-03-21 21:08:02 发布
原创 最新推荐文章于 2025-03-21 21:08:02 发布 · 156 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

本文详细阐述了CSS选择器:nth-child()和:nth-of-type()的区别，通过实例说明它们在选取元素时的不同点。 nth-child()关注所有子元素的位置，而nth-of-type()则专注于相同类型的元素。示例代码演示了在不同情况下两者的渲染效果，帮助开发者更好地理解和运用这两个选择器。

css中nth-child()和nth-of-type()的区别

nth-child()：当前节点下的所有的兄弟结点；
nth-of-type():指的是当前节点下同类型节点，比如p:nth-of-type(4),指的是兄弟节点p元素中的所有p元素中的第四个；
下面是一个例子：
源码
效果图
nth-child(4)所处的位置为<span>3333</span>,不为p元素，所以没有红色渲染,
若代码这样
源码
效果则为
效果图

CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 855
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
JokerSoulClub的博客
02-24 6874
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器 结合以下样例 <!DOCTYPE html> <html> <he
CSS伪类选择器：nth-of-type() 详解
最新发布
2301_81536938的博客
03-21 1029
4</p>换成了<div>4</div>，伪类选择器就没有读取4而是转而读取了后面的<p>5
伪元素nth-child()与nth-of-type()有什么区别
mini_1251861209的博客
09-23 577
p:nth-child(4)指的是p元素的第四个兄弟元素，如果这个元素是p元素就会选中，如果不是就不会 p:nth-of-type(4)指的是第四个p元素 例： <p></p> <p></p> <a></a> <a></a> <!-- p:nth-child(4)会选中这个，但是由于...
nth-of-type和nth-child的区别
柒君的博客
01-10 385
这代表一堆p元素中的第四个p元素，颜色应为红色 p:nth-of-type(4){ color:"red"; } 这代表一堆子元素中的第四个元素，且它如果是p元素，颜色应为红色 p:nth-child(4){ color:"red"; } 你细品！！！
详解CSS nth-child与nth-of-type的元素查找方式
09-24
在实际使用中，nth-child和nth-of-type的选择方式区别主要体现在它们如何在兄弟元素中进行选择。nth-child(n)会从所有子元素中选择第n个元素，不论这些元素是什么类型。而nth-of-type(n)则会首先确定所有与它匹配的...
css :nth-child与:nth-of-type之小解
09-25
CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...
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-child()和:nth-of-type()的区别
weixin_40642141的博客
05-22 684
定义区别 定义 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. (n 可以是数字、关键词或公式) 区别 ...
被多数人误解的nth-of-type
Dolanf的博客
07-22 5992
nth-of-type是css3的一个结构性伪类选择器，很多人都知道nth-of-type(n)用于匹配父元素下使用同种标签的第n项子元素，但是也有不少人对这个选择器存在着一些误解。先说一个在使用nth-of-type时可能碰到的问题：
详解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; ...
:nth-child()和:nth-of-type()选择器的区别
日常总结
04-25 755
p:nth-child(2) 要求该元素是p元素，且是父元素的第二个子元素p:nth-of-type(2) 要求该元素是父元素下的第二个p元素类似的还有，:nth-last-child、:nth-last-of-type:last-child、:last-of-type...
css nth-of-type nth-of-child(公式)
HangMine的博客
05-25 1976
知识点:1.nth-of-type公式里的n是从0开始计算2.nth-of-type获取到的元素，是从1开始计算3.如果需要获取或排除前面的元素，用nth-of-type   如果需要获取或排除前面的元素，用nth-last-of-type例子：1.获取前三个：nth-of-type(-n+3),从n=0开始计算，分别得到第3，第2，第1个元素2.获取前三个除外的：nth-of-type(n+4)...
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-child的用法
Never say never for ss
02-21 610
:nth-child(2)选取第几个标签，正整数 .ul li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下面一样.ul li:nth-child(n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 .ul li:nth-child(-n+4){backgr
zTree 插件 - 获取当前选择节点下的全部子节点
简简单单Onlinezuozuo
09-21 1万+
文章目录zTree 插件 - 获取当前选择节点下的全部子节点id1、创建初始化设置2、创建点击响应事件 zTree 插件 - 获取当前选择节点下的全部子节点id 1、创建初始化设置 var setting = { data: { simpleData: { enable: true } }, callback: { ...
css加载动画
weixin_41897680的博客
09-25 8696
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
CSS3 :nth-child(n)使用注意
热门推荐
IT技术宅-北方的刀郎
02-07 4万+
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
css3中nth-child与nth-of-type
09-10
nth-child和nth-of-type是CSS3中的伪类选择器，它们允许你根据元素在其父元素中的位置来选择元素。 nth-child选择器选取父元素中的某个特定位置的子元素。它接受一个参数n，表示选择每隔n个子元素。例如，nth-child(3n)会选择每隔3个子元素的元素。如果参数是一个常数（如2、3、4等），则会选择具有与该常数相同索引的元素。 nth-of-type选择器与nth-child类似，但只会考虑同类型的子元素。它也接受一个参数n，表示选择每隔n个同类型子元素。例如，nth-of-type(2n)会选择每隔2个相同类型的子元素。 以下是一些示例： ```css /* 选择第一个子元素 */ :nth-child(1) { /* 样式 */ } /* 选择偶数位置的子元素 */ :nth-child(even) { /* 样式 */ } /* 选择奇数位置的同类型子元素 */ :nth-of-type(odd) { /* 样式 */ } /* 选择第3个、第6个、第9个等位置的同类型子元素 */ :nth-of-type(3n) { /* 样式 */ } ``` 请注意，参数n是从1开始计数的，并且可以是负数。这些选择器在创建网格或布局时非常有用，可以帮助你选择特定位置的元素并应用样式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值