css:伪类:first-child,:nth-child(n),:nth-of-type(n)区别

最新推荐文章于 2022-07-14 18:11:08 发布
最新推荐文章于 2022-07-14 18:11:08 发布
阅读量436 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49888984/article/details/108148408
本文深入解析CSS中的三种伪类:first-child、:nth-child(n)与:nth-of-type(n)的区别与用法。通过具体示例说明如何精准定位元素，实现网页布局的精细化控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

:first-child,:nth-child(n),:nth-of-type(n)区别

p:first-child
匹配其父元素中的第一个子元素的

元素

p:nth-child(n)
选择所有 p 元素的父元素的第二个子元素(目标元素可以不是p元素)

p:nth-of-type(n)
选择所有p元素第二个为p的子元素

CSS:first-child 和 nth-child 的区别及用法详解
DevSavantX的博客
09-29 1059
`:first-child` 选择器用于选取父元素下的第一个子元素。它是基于元素在父元素中的位置进行选择，而不考虑其他条件。``:nth-child` 选择器允许选择父元素中特定位置的子元素。它使用一个表达式作为参数，用来确定要选择的子元素的位置。是两个常用的伪类选择器，用于选择元素的特定位置或顺序。虽然它们都可以用来选择子元素，但它们在选择的方式和作用上有一些区别。选择器也可以使用更复杂的表达式，如。（选择每隔两个元素的子元素）。（选择奇数位置的子元素）或。选择器具有更大的灵活性。
CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 816
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
CSS：好玩的‘伪类’系列之——(:nth-of-type()、:first-of-type和:last-of-type)
gavincz的博客
04-30 1446
:nth-of-type() 定义：在拥有同一父元素的情况下（前提），匹配一组相同的兄弟元素，修改其样式 触发条件：( )中为数字值，从1开始（注意，不是下标，木有0），也可以是2n或者2n+1。2n代表匹配所有相同的偶数元素，2n+1代表匹配所有相同的奇数元素；也可以使用关键字odd（代表奇数）和even（代表偶数），修改指定的元素样式 兼容：IE8及8以下不支持Opera9.5以下不支...
first-of-type与first-child区别
luckyrass的专栏
07-07 1553
转自:http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child  匹配不到任何元素，因为在这里h1是div的第
CSS的first-child、nth-of-type
AboyL的博客
07-20 516
这几个选择器其实我是很懵逼的。因为first-child的使用是 p:first-child这种形式 这个很容易就让人想到，first-child应该位于某个元素的后端，他就想是伪元素或者伪类那个样子，但是这种思考其实是错误的。 .child:first-child很容易让人以为，选择的是 .child元素的第一个元素，也就是 <div class="father">...
伪类选择器:first-child和:nth-child()和:first-of-type
weixin_30808693的博客
06-26 231
x:first-child和x:nth-child(1)功能一样，首先选中的是x元素，并且x元素必须是它父元素的第一个子元素，选择器才成立，否则不能选中。其中x也可以是选择器。由此看出nth-child功能强劲，完全可以代替first-child的功能。nth-last-child和nth-child的区别就是反向查找 x:first-of-type，选择x元素的父元素的首个 x元素，但x不...
first-child、first-of-type、nth-child和nth-of-type的区别
dan_seek的博客
04-11 1135
公共样式 span,label{ display: inline-block; width: 80px; line-height: 30px; border: 1px solid #000000 } 1、first-child匹配第一个子元素 匹配第一个span .test1 span:first-child{ background-color: #FFA500; } <div ...
jQuery选择器深入解析：伪类选择符nth-child的用法
jQuery不仅支持基本的CSS选择符，还扩展了许多CSS3的伪类选择符，包括`:nth-child`。`:nth-child`伪类选择符在CSS3中引入，而在jQuery中得到了良好的支持，它允许我们根据元素在父元素中的位置来选择元素。 `:nth-...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
此外，虽然不适用于IE8，但这里也提及了一些其他CSS3选择器，如`nth-of-type()`、`:first-of-type`、`:last-of-type`、`:only-of-type`、`:nth-last-child()`和`:nth-last-of-type()`。这些选择器允许更精确地定位...
css选择器 :nth-of-type(1)、:nth-child(1)、:first-child、 :first-of-type
暮色里的山羊
05-06 3411
最近又把css复习了一遍，其中遇到这两个选择器，有时候会弄错，所以今天在深入了解下。 带 “:” 的选择器一般是指定元素具有某种特性。 顾名思义。:nth-child(1) 的1表示第一个元素，child表示这是一个儿子元素，就是第一个儿子元素。例子： p:nth-child(1)有两个条件要满足，缺一不选： 1、是其父元素的第一个子元素。 2、还要是p元素。 :first-of...
nth-child(1) 和 和 first-of-type的区别
weixin_34402408的博客
10-31 219
nth-child() 是指该元素处在父级元素下不论标签的类型下排第几个 <section> <div>我是一个普通的div标签</div> //第一个div儿子 表示 p:first-child div:first-child或者 div：first-of-type <p>我是第1个p...
nth-child,nth-of-type,first-of-type,last-of-type,nth-last-of-type,only-of-type等的区别
hongyu_lin的博客
11-14 2075
*-child和*-of-type分别有五个前缀，即：nth，nth-last，first，last，only。 其中nth和nth-last需要传入参数，即第n元素的n值。 first前缀等同于nth前缀传入参数1，last前缀等同于nth-last传入参数1。 即first-child和nth-child(1)等同，first-of-type和nth-of-type(1)等同，last-
css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器
05-05 684
记录一下前一段时间使用、学习的几种选择器。 1. :frist-child 选择器 比如 <ul><li></li> 　　　　<li></li> 　　　　 　　　　<li></li></ul> 要选中第一个li，则使用 li:frist-child{}，而不是ul:frist-child{}，将会...
:nth-child、:nth-of-type 、:first-child与:first-of-type这四者异同？
banglei123的博客
02-20 255
<body> <div> <p>大儿子</p> <div>二儿子</div> <p>三儿子</p> </div> <p>二叔</p> <div>三叔<div> </body> div:nth-child(2) 选中父元素里的第二个子元素div；（即二儿子被选中.
CSS中的:first-child、nth-child()与nth-of-type()
Start -ZJ的博客
09-15 422
今天运用到了first-child与nth-child()，发现怎么也用不对，重新查了下发现自己对这两个伪类的理解有错误，就重新开个帖子。 first-child 先来段代码: H5: <div> <h2>2</h2> <p>XX</p> <p>XXX</p> <p>XXXX</p>...
first-of-type，nth-of-type，last-of-type分类问题
陈亮宇的博客
04-17 674
first-of-type，nth-of-type，last-of-type分类问题
:first-child,:nth-child选择器的使用和隔行变色
m0_68169119的博客
07-14 2343
html加css实现隔行变色效果
CSS 序号选择器序号first :nth-child(n) Sequence number selector 属性选择器attribute selector
HandsomeDanielWu的博客
06-27 212
CSS 序号选择器序号Sequence number selector 属性选择器attribute selector
first-child、 last-child 和 nth-child(n) 区别
奋斗的小猪
08-20 2565
1.nth-child(n)选择器 匹配父元素中的第n(从0开始)个子元素；其中n可以是一个数字或表达式。 //选择列表的第二个标签设置其背景色为红色 li:nth-child(2){ background-color: red; } //选择倒数第2个li li:nth-last-child(2){ background-color: red; } 2.last-child selec...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值