CSS3选择器:nth-child和:nth-of-type之间的差异

最新推荐文章于 2024-09-11 09:30:30 发布
最新推荐文章于 2024-09-11 09:30:30 发布
阅读量185 收藏
点赞数
分类专栏： 前端 文章标签： css css3 :nth-child :nth-of-type
原文链接：https://www.mk2048.com/blog/blog.php?id=h0ahhja0ij1j&title=CSS3%E9%80%89%E6%8B%A9%E5%99%A8%3Anth-child%E5%92%8C%3Anth-of-type%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82
版权

转自：http://www.zhangxinxu.com/wordpress/2011/06/css3选择器nth-child和nth-of-type之间的差异/

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
苘迷
关注
专栏目录
详解CSS3选择器:nth-child和:nth-of-type之间的差异
12-13
我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 -->...尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。 对于:nth-child选择器，在简单白话文中，意味着选择一个元素：
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4691
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
css简易的进度条
qq_45723045的博客
10-22 867
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
CSS中 nth-child 与 nth-of-type 的区别
最新发布
上进！努力！！！
09-11 907
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
CSS3中：nth-child和：nth-of-type的区别深入理解
lonecry的博客
02-21 9927
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
weixin_30318645的博客
01-14 358
Css 3 中两个新的选择器nth-child 和 nth-of-type 都可以选择父元素下对应的子元素，但它们到底有什么区别呢？ :nth-child(n)选择器匹配属于其父元素下的第n个子元素，不论元素的类型。 :nth-of-type(n)结构性伪类选择器，匹配父元素下使用同种标签的第n项子元素，它的选择范围是父元素下某一种元素类型的集合。 例如： 　　p:nth...
CSS3伪类选择器：nth-child()
12-11
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地选取页面中的元素，尤其在处理列表或其他具有多个同级元素的场景下。它基于元素的兄弟关系和它们在父元素中的相对位置来应用样式，极大...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
CSS3中:nth-child和:nth-of-type的区别深入理解
09-25
在CSS3中，`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素，但它们之间存在着微妙的区别，这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...
nth-child 与 nth-of-type
weixin_65874102的博客
11-10 440
nth-child 与 nth-of-type
详解CSS nth-child与nth-of-type的元素查找方式
09-24
主要介绍了详解CSS nth-child与nth-of-type的元素查找方式的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS进阶知识：新增选择器-----结构伪类选择器：nth-child和nth-of-type的区别，伪类选择器使用方式，隔行变色案例
我就知道你会来，我们一起进步吧！
02-23 513
2.nth-of-type对父元素里面指定子元素进行排序选择，先去匹配标签，再去找这个标签的第几个孩子。1.nth-child对父元素里面所有孩子排序选择，先找到第n个孩子，然后看看是否是所需的标签。结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。nth-child（n）选择某个父元素的一个或者是多个特定的子元素。2.n如果是数字，就选择第n个子元素，里面数字从1开始......3.n可以是关键字：even表示偶数，odd表示奇数。1.n可以是数字，关键字和公式。
nth-of-type和nth-child的区别与相关使用
djh052900的博客
07-04 3313
nth-of-type和nth-child的区别与相关使用，选取前几个，选取后几个，选取前几个和后几个， 选取第几个到第几个等等
nth-child和nth-of-type的区别
ccattempt的博客
02-10 1833
nth-child和nth-of-type是比较常用的一个伪类选择器，过去一直没在意这个，今天发现原来他们之间还有这样的区别，记录一下。 我们首先来看MDN上对它们的解释： :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...） :nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选.
简单看懂nth-child与nth-of-type区别
Henry13133333的博客
08-07 688
1、:nth-child 当前父元素下面的所有的子元素 2、:nth-of-type 当前父元素下同类型的子元素 举例 01 ：【有 指定标签】 div p:nth-child(3) 是先选中了div下的第3个子元素，再判断是不是p，若不是，则选择失败（如上图所示， i 没有被选择，无效果）。 div p:nth-of-type(3) 是直接选中了div下的第3个 p 子元素（如上图所示）（直接跳过type类型不是p的子元素）。 【有 指定标签】简单总结 区别： di...
：nth-of-type（n）和：nth-child（n）的基友关系
热门推荐
黑小Amui的博客
05-22 1万+
一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这两个傻傻难分。。。好了，入正题，其实可以从表面窥视到这两人的”内心“，且称他们为type先生和child先生，他们都以自己为重，顾名思义，type先生会关注type类...
CSS：好玩的‘伪类’系列之——(:nth-of-type()、:first-of-type和:last-of-type)
gavincz的博客
04-30 1316
:nth-of-type() 定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式 触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式 兼容：IE8及8以下不支持Opera9.5以下不支...
:nth-child和:nth-of-type区别
10-13
:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于： - :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。 - :nth-of-type(n)选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值