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

最新推荐文章于 2023-04-17 11:59:41 发布
转载 最新推荐文章于 2023-04-17 11:59:41 发布 · 208 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/su20110702048/p/7595208.html

稍微自己理解了一下，感觉就是：nth-of-type似乎有种族歧视，界限划分很清晰。在同一个国家（父级）中的时候，nth-of-type指认自己人排名，nth-child全都算在内排名，阿T的要求真的很严格

转载于:https://www.cnblogs.com/su20110702048/p/7595208.html

abma21132911
关注
详解CSS3选择器:nth-child和:nth-of-type之间的差异
12-13
p:nth-of-type(2) { color: red; } 上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色： 尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。 对于:nth-child...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
p标签用nth-child（1）不显示，nth(2)显示
君诏的博客
04-17 469
使用p:nth-child(1)不显示，而p:nth-child(2)显示。number——是一个字面正整数，将选择第number个子元素；even——是个关键字，将选择处在奇数序号的子元素；odd——是个关键字，将选择处在偶数序号的子元素；其中：a、b都是字面整数，n是计数器（自动从0开始）。nth-of-type() 选择器：父元素下的第几个。an+b——计算要选择的子元素的序号的公式，
CSS3:nth-child选择器基本用法简述
qq_42000887的博客
09-15 3360
nth-child介绍
p:nth-child(1) : 选择p是子元素中的第一个元素
qq_47443027的博客
05-17 1401
nth：第n个 child：孩子 last：最后的 :nth-child ：nth-last-child（）
#Css篇: p:nth-child--匹配任何类型的父元素下的第n个子元素和p:nth-of-type---匹配同类型子元素中的第n个元素
...
04-16 352
示例：.class p:nth-child(3) 将选择 .class 类中的第3个子元素，如果这个子元素是。示例：.class p:nth-of-type(2) 将选择属于 .class 类的所有元素中的第二个。只计算同一类型（元素标签名相同）的兄弟元素，并按顺序从1开始计数。该选择器匹配其父元素中第 n 个子元素，不论元素类型是什么。该选择器匹配其父元素中指定类型的第 n 个元素。计算所有类型的兄弟元素，并按顺序从1开始计数。
CSS3中nth-of-type和nth-child选择器区别分析和理解
让我去流浪啊
07-18 1103
第一层 按照网上的理解，p:nth-of-type(2)表示选择第二个p标签，而p:nth-child(2)表示选择一个p标签并且这个标签是父元素的第二个子元素。p:nth-of-type(2)表示子元素中的第二个p标签。 <!DOCTYPE html> <html> <head> </head> <style type="text/cs...
CSS3中:nth-child和:nth-of-type的区别深入理解
09-25
在CSS3中，`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素，但它们之间存在着微妙的区别，这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...
CSS3伪类选择器：nth-child()
12-11
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地选取页面中的元素，尤其在处理列表或其他具有多个同级元素的场景下。它基于元素的兄弟关系和它们在父元素中的相对位置来应用样式，极大...
:nth-child()和:nth-of-type()选择器的区别
日常总结
04-25 750
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-child 与 nth-of-type 选择器详解
kk_yanwu的博客
03-07 1139
nth-child 与 nth-of-type 都是CSS3的伪类选择器，两者都是用于 “子代元素”，两者之间的功能差不多，却也存在着一些差异； 例： <table > <tr> <th> <p>1111111111111111111111111111</p> ...
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元素不是第一个子元素
css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别
前端小白
06-13 4139
这个文章标题似乎太长了。但是不点明又不大好。哈哈，暂且不要在意这些细节了，说说今天的主角 CSS的伪类选择器:nth-child，至于为什么还需要配角:nth-of-type,是因为我个人觉得这两个选择器的功能有点相近，估计也有初学者像我一样“粗心大意”，不注意区分它们之间的不同。再者说，两个有了对比也可以加深印象。 先看下两者的定义与用法 :nth-child(n) 选择器匹配属于其父元
选择器 :nth-child()和nth-of-type()区别
qiaoqiaoBigBoss的博客
04-26 198
区别： 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&
p:nth-of-type与child的区别
weixin_45031830的博客
07-19 120
https://zhuanlan.zhihu.com/p/126681521
css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异
weixin_42601134的博客
08-04 1万+
先看一个简单的实例，首先是HTML部分：我是第1个p标签我是第2个p标签 然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色：尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。对于:nt...
workspacesthinclient-jvm-1.0.50.jar
11-17
workspacesthinclient-jvm-1.0.50.jar
waf-jvm-1.4.58.jar
11-17
waf-jvm-1.4.58.jar
migrationhuborchestrator-jvm-1.2.1-sources.jar
最新发布
11-18
migrationhuborchestrator-jvm-1.2.1-sources.jar
:nth-child选择器和:nth-of-type选择器 :nth-child选择器和:nth-of-type选择器的区别在于什么？你认为哪种更好用？
09-22
`:nth-child`和`:nth-of-type`是CSS中的伪类选择器，它们在选择元素时存在明显区别： - **计数范围**：`:nth-child(n)`计算父元素的所有子元素（包括不同类型），而`:nth-of-type(n)`仅计算同类型的子元素[^2]。 - *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值