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

最新推荐文章于 2024-10-04 21:26:09 发布
最新推荐文章于 2024-10-04 21:26:09 发布
阅读量117 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeSentimental/article/details/120888654
版权
本文详细阐述了CSS选择器:nth-child()和:nth-of-type()的区别，通过实例说明它们在选取元素时的不同点。 nth-child()关注所有子元素的位置，而nth-of-type()则专注于相同类型的元素。示例代码演示了在不同情况下两者的渲染效果，帮助开发者更好地理解和运用这两个选择器。
摘要由CSDN通过智能技术生成

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元素，所以没有红色渲染,
若代码这样
源码
效果则为
效果图

Be sentimental
关注
专栏目录
CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 711
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
被多数人误解的nth-of-type
Dolanf的博客
07-22 5677
nth-of-type是css3的一个结构性伪类选择器，很多人都知道nth-of-type(n)用于匹配父元素下使用同种标签的第n项子元素，但是也有不少人对这个选择器存在着一些误解。先说一个在使用nth-of-type时可能碰到的问题：
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
JokerSoulClub的博客
02-24 6497
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器 结合以下样例 <!DOCTYPE html> <html> <he
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; }
CSS3 选择器 :nth-child 与 :nth-of-type 区别
m0_68997646的博客
01-27 1189
CSS3 选择器 :nth-child 与 :nth-of-type 区别
秒懂:nth-child()和:nth-of-type()的区别
weixin_40642141的博客
05-22 597
定义区别 定义 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. (n 可以是数字、关键词或公式) 区别 ...
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
详解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()`选择器用于选取父元素中具有特定索引位置的子...
详解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 696
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 1848
知识点: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&
zTree 插件 - 获取当前选择节点下的全部子节点
简简单单Onlinezuozuo
09-21 1万+
文章目录zTree 插件 - 获取当前选择节点下的全部子节点id1、创建初始化设置2、创建点击响应事件 zTree 插件 - 获取当前选择节点下的全部子节点id 1、创建初始化设置 var setting = { data: { simpleData: { enable: true } }, callback: { ...
css加载动画
weixin_41897680的博客
09-25 8399
前言 感觉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选择器
YITA90的专栏
06-03 1996
原文链接：https://grack.com/blog/2015/01/09/abusing-css3-selectors/ 如果你对这篇文章感兴趣，可以了解更多的有关 CSS4 的知识来提升自己。CSS3的:nth-child 和 :nth-last-child 选择器的神奇之处，不仅仅是可以替代 :first-child 和 :last-child 选择器，它还可以匹配更为复杂的子元素，比如
CSS相关属性和显示模式
最新发布
探索软件工程的奥秘
10-04 1263
例：background : pink url(./cat.png) no-repeat right center/cover;属性值：block（块级）、inline（行内）、inline-block（行内块）值：no-repeat、repeat（默认）、repeat-x、repeat-y。例2：background-position : 50px -100px;rgba表示法：rgba(r,g,b,a)，a表示透明度（0-1）例：background-repeat : no-repeat。
学习 CSS 新的属性 conic-gradient 实现环形进度条
m0_73035846的博客
10-04 384
我们在工作中用到环形进度条的时候，一般都是使用组件库提供的，那么你有没有想过这是怎么实现的呢？
css3中nth-child与nth-of-type
09-10
nth-child和nth-of-type是CSS3中的伪类选择器，它们允许你根据元素在其父元素中的位置来选择元素。 nth-child选择器选取父元素中的某个特定位置的子元素。它接受一个参数n，表示选择每隔n个子元素。例如，nth-child...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值