:nth-child(){}用法

最新推荐文章于 2024-02-18 00:11:54 发布
最新推荐文章于 2024-02-18 00:11:54 发布
阅读量607 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Css 文章标签： Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44932450/article/details/90449805
本文介绍了CSS中选择特定位置标签的方法，如:first-child选取第一个标签，:last-child选取最后一个标签，以及通过:nth-child()和:nth-last-child()等选择器，可按顺序、奇偶、自定义规则等选取标签。

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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/weixin_44932450

:first-child 选取第一个标签
:last-child 选取最后一个标签

:nth-child(2) 选取第二个标签
:nth-child(n) 选取第N个标签

:nth-child(2n) :nth-child(even) 选取偶数标签
:nth-child(2n+1) :nth-child(odd) 选取奇数标签

:nth-child(n+4) 选取大于等于4的标签
:nth-child(-n+4) 选取小于等于4的标签

:nth-child(3n+1) 自定义选择标签，n取0开始，隔二取一个标签

:nth-last-child(2) 选取倒数第二个标签
:nth-last-child(n) 选取倒数第N个标签

微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
杭州.黄老师
04-03 7369
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类 定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。 浏览器支持 所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更...
:nth-child(n)与:nth-of-type(n)
muguazhuye的博客
11-20 363
:nth-child(n) 是选择父元素的第n个子元素。 :nth-of-type(n) 是选择父元素的第n个同类型的子元素 .read p:nth-child(2) 选择的是父元素.read第2个子元素，且是p元素。（先找第2个，再找是不是p） .read p:nth-of-type(2) 则是选择父元素.read第2个为p的子元素。（先找p，再找第2个） ...
【css】8.nth-child(2)
jieweiwujie的博客
12-28 1005
div:nth-child(1)
first-child和last-child选择器 nth-child(n）第几个元素 nth-last-child(n)倒数第几个元素...
weixin_30263277的博客
03-12 926
：first-child 和 ：last-child 分别表示父元素中第一个 或者 最后一个 子元素设置样式，如上图 转载于:https://www.cnblogs.com/agansj/p/8552189.html
:nth-child 用法 CSS
hyugyug的博客
10-16 605
:first-child 选取第1个子元素 :nth-child(n) 选取第n个子元素 :nth-child(n+2) 选取从第2个开始的子元素 :nth-child(-n+2) 选取第2个及其之前子元素 :nth-child(2n) 选取偶数子元素 :nth-child(2n-1) 选取奇数子元素 :last-child 选取最后一个子元素 :nth-...
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
CSS3伪类选择器：nth-child()
12-11
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地选取页面中...因此，了解并掌握:nth-child()等CSS3选择器的用法对于前端开发者来说至关重要，它将有助于提升网页设计的美观性和用户体验。
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
在标题和描述中提到的代码示例中，开发者尝试使用`nth-child()`选择器为`<ul>`列表中的第一和第三个`<li>`元素设置不同的背景颜色。在IE9及以上版本，这个代码可以正常工作，但在IE8中，背景颜色无法显示。 为了...
css :nth-child与:nth-of-type之小解
09-25
`:nth-child()`选择器用于选取父元素中具有特定索引位置的子元素。这里的索引位置是从1开始计算的，包括所有类型的子元素。例如，`p:nth-child(2)`会选择父元素中的第二个子元素，无论该元素是什么类型。在提供的...
p标签用nth-child（1）不显示，nth(2)显示
君诏的博客
04-17 445
使用p:nth-child(1)不显示，而p:nth-child(2)显示。number——是一个字面正整数，将选择第number个子元素；even——是个关键字，将选择处在奇数序号的子元素；odd——是个关键字，将选择处在偶数序号的子元素；其中：a、b都是字面整数，n是计数器（自动从0开始）。nth-of-type() 选择器：父元素下的第几个。an+b——计算要选择的子元素的序号的公式，
CSS:nth-child用法
weixin_30493321的博客
09-17 417
1.我对 :nth-child的理解 　　利用该选择器我们可以轻松的修改特定标签的样式 2. :nth-child的用法 　　（1）选取第几个标签，这里的数字可以是我们想要的，如下面选取对应的第二个P标签 p:nth-child(2){color:red;} 　　（2）选取大于等于2的标签，n表示整数，整数代表大于等于，负数代表小于等于，如下面所示 p:nth-chi...
nth:child()选择器
qq_46241430的博客
04-04 1695
:nth-child()的理解和使用
nth-of-type(2)和nth-child(2)的区别
weixin_30337157的博客
01-30 214
<div class="test"> 　　<p>A元素</p> 　　<div>B元素</div> 　　<p>C元素</p> 　　<p>D元素</p> </div> 看下面的代码 $("p:nth-of-type(2)")//选择的是C元素 $("p:nth-chi...
CSS的伪类选择器:nth-child()
最新发布
kfepiza的博客
02-18 4105
第一个匹配的元素是 0 [=5x0]，但由于元素的索引是从 1 开始的而 n 从 0 开始，所以不会匹配任何元素。是一个非常强大的工具，它允许你根据元素在其父元素中的位置（序数）来选择特定的子元素。表示第 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4]……表示第七个及其之后的元素：7 [=0+7]、8 [=1+7]、9 [=2+7]，等等。表示兄弟元素列表中的第 8 到第 15 个，且为 元素的元素。
css选择器:nth-child()的用法
热门推荐
得意小门生的博客
10-13 7万+
:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的，直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-chil
html相同标签nth,详解CSS nth-child与nth-of-type的元素查找方式
weixin_39743357的博客
06-27 1226
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。nth-child(n) —— 寻找第n个子元素nth-of-type(n) —— 寻找同一类型元素里的第n个元素看这个定义也许还不是很清楚他们的区别，我们一点点来区分。p:nth-child(2) 与 p:nth-pf-type(2)HTML代码...
:nth-child的坑用:nth-of-type解决
qq_41818857的博客
02-03 362
大的大
nth-child选择（小研究）
天空影
12-13 1941
nth-child用法 小研究
详解CSS中:nth-child的用法
jie566的专栏
05-24 1760
前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！ :nth-child(2)选取第几个标签，“2可以是你想要的数字” 实例： 代码： .demo01 li:nth-child(2
:nth-child用法
05-27
在实际使用中，:nth-child 还可以和其他 CSS 选择器结合使用，例如 `div:nth-child(odd)` 表示选取所有 div 元素中的奇数项。此外，:nth-child 还支持一些特殊的表达式，例如 `:nth-child(2n + 1)` 表示选取所有奇数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值