nth-child（）选取中间的孩子

最新推荐文章于 2025-10-09 23:03:32 发布

转载最新推荐文章于 2025-10-09 23:03:32 发布 · 969 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.xiaofengcun.cn/css-nth-child-xuan-ze-qian-ji-ge-yuan-su/

前端专栏收录该内容

39 篇文章

订阅专栏

本文介绍如何使用CSS选择器:nth-child来高效地为列表项设置样式。通过不同的组合方式，可以轻松实现对特定位置元素的样式调整，例如为列表中前几个元素设置特殊的顶部外边距。

前言
渲染列表时，需要设置前3个元素的margin-top值与其他的不同。

使用

:nth-child(-n+3){
     margin-top: 12px;
 }

扩展
选择前几个元素

/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}

从第几个开始选择

/*【正方向范围】选择从第6个开始的 */
:nth-child(n+6){}

两者结合使用，可以限制选择某一个范围

/*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */
:nth-child(-n+9):nth-child(n+6){}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LT_ya

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

IE8下CSS3选择器nth-child() 不兼容问题的解决方法

11-21

在案例中，`first-child+li+li`会选取紧跟在第一个`<li>`后面的第二个`<li>`，即原本`nth-child(3)`要选中的元素。以下是调整后的代码示例： ```html ul { list-style: none; } div ul li { width: 100px; ...

CSS3伪类选择器：nth-child()

09-27

3. **倍数分组匹配**：`:nth-child(an+b)` 和 `:nth-child(an-b)`，例如`:nth-child(3n+1)`，它会选取每个3个子元素中序号为1的元素，即每组的第1个元素。`a`和`b`都是正整数或0。负号版本`:nth-child(3n-1)`则选取3...

参与评论您还未登录，请先登录后发表或查看评论

几张图浅理解（会用） :nth-child()

a666666000的博客

09-20

2521

几张图带你浅理解（会用） :nth-child()

CSS 选择器 nth-child 实现一个范围

海天鹰

07-07

613

CSS 选择器 nth-child 实现一个范围

深入解析 CSS `:nth-child()` 伪类选择器

最新发布

2501_93104808的博客

10-09

436

CSS :nth-child() 伪类选择器详解 :nth-child() 是 CSS 中强大的选择器，用于根据元素在兄弟节点中的位置来选择元素。它接受关键字（odd/even）、整数或公式（an+b）作为参数，常用于实现隔行变色、精确选择特定位置元素等场景。该选择器会计算所有同级子元素的位置，不考虑元素类型，与:nth-of-type()（只计算同类型元素）形成关键区别。语法灵活，支持多种计算方式，浏览器兼容性好（IE9+）。使用时需注意计数从1开始，合理选择:nth-child()或:nth-of-ty

css选择器nth-child(n)、first-child、last-child

Poo__Chai的博客

09-13

1062

&amp;gt; 1：nth-child(n)选择器匹配父元素中的第n个子元素。 1: nth-child(3)选择列表的第三个元素 p:nth-child(3){ background：#ccc; } 2: nth-child(2n) 选择列表中的偶数标签 2 4 6 8 nth-child(2n-1) 选择列表中的偶数标签 1 3 5 7 p:nth-child(2n/2n-1){...

css的特殊选择器 nth-child

sina_panda

04-02

608

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： :nth-child(2)选取第几个标签，“2可以是你想要的数字” .demo01 li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同 .demo01 li:nth-child(n+4){backgro

CSS3中:nth-child和:nth-of-type的区别深入理解

心暖未晴

07-03

3322

关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下

css :nth-child与:nth-of-type之小解

09-25

`:nth-child()`选择器用于选取父元素中具有特定索引位置的子元素。这里的索引位置是从1开始计算的，包括所有类型的子元素。例如，`p:nth-child(2)`会选择父元素中的第二个子元素，无论该元素是什么类型。在提供的...

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

09-24

例如，`p:nth-child(2)`会选择所有在其父元素中作为第二个孩子的``元素。在最初的示例中，当HTML结构为多个连续的``标签时，`:nth-child(2)`和`:nth-of-type(2)`的效果相同，因为在这个情况下，第二个子元素...

jQuery中:nth-child选择器用法实例

10-24

在Web开发中，jQuery提供了非常强大的选择器来帮助我们选取页面元素，其中之一是:nth-child选择器，它用于选取父元素下的第n个子元素或匹配奇偶元素。nth-child选择器在处理具有重复子元素的DOM结构时尤其有用，它...

css选择器:nth-child(n)选择前几个元素

WANGBUZHIQ的博客

11-22

9125

学习记录2 css选择器:nth-child(n)选择前几个元素如：在项目中要实现如下效果在三列布局中间加边框线，只使用border-right是不行的，三个div都会被选中，因此使用css选择器给前两个div进行添加样式，实现代码如下： .totalShow > div:nth-child(-n+2) { border-right: 1px solid #E4E7ED; } 其中 >大于号代表只选择下一代子元素 (-n+2) 代表选择前两个。针对nth-ch

CSS3的nth-child选择器的使用

得已

04-02

4968

在w3school网站上,对于 nth-child 的解释十分含糊,以至于我一段时间认为,这个东西实在没什么大用.可是,当我研究透了之后,我猛然间发现,这家伙实在是太厉害了啊!!当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的.有哪些 nth-child ?nth-child 不仅仅只有一个,而是有一系列的这样的选择器,可以...

css3的nth-child选择器的详细探讨

FungLeo's Blog

03-06

1万+

css3的nth-child选择器的详细探讨css3的nth-child选择器的详细探讨前言有哪些 nth-child nth-child研究开始构建DOM结构开始实践CSS代码为方便研究我们现给一段基础CSS代码选择第N个LI 选择前三个选择从第四个开始到最后选择第四个到第八个选择奇数行选择偶数行选择369等三倍数行选择258等三倍数行选择14710等三倍数行选择 51

【css选择器】nth-child()的相关用法

A Lucky Boy的博客

05-14

6398

目录前言一、列表中的偶数标签 :nth-child(2n) 二、列表中的奇数标签 :nth-child(2n+1) 三、选择从第6个开始，直到最后 :nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、选择第6个到第9个六、补充:nth-of-type(n) 七、从倒数第六个开始变色前言 :nth-child()选择器，该选择器选取父元素的第 N 个子元素，与类型无关，公式通用。一、列表中的偶数标签 :nth-child(...

对于nth-child()的理解

corn78的博客

11-24

4251

定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。一、:nth-child(n)（n为数字时）在这个类名为box的盒子中，我在两个p标签之间加上了一个span标签。这里，:nth-child这个伪类不论元素类型，所以是直接找到父元素中的第n个子元素。第一个选择器找到的是box父元素中的第二个子元素（span），...

CSS3 :nth-child() 选择器

blogscsdn的博客

08-16

1005

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。选取#demo第一个子元素p 如果你以为我会被选中变红，那你就猜错了落后的浏览器落后的浏览器落后的浏览器... #demo p:nth-child(1){ color:#f00; } &nbsp

CSS: nth-child()选择前几个元素

热门推荐

weixin_39015132的博客

08-24

6万+

原文链接前言渲染列表时，需要设置前3个元素的margin-top值与其他的不同。使用 :nth-child(-n+3){ margin-top: 12px; } 扩展选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-c...

nth-child选择器 | 属性选择器详解

GR6080的博客

01-06

1万+

前端的兄弟想必都接触过CSS中一个神奇的玩意，不用添加class名可以轻松获取你想要的标签并给与修改添加样式，是不是很给力，它就是：nth-child 与属性选择器

nth-child 选择中间n个元素

08-23

在使用:nth-child选择中间n个元素时，可以结合使用:nth-child(n x)和:nth-child(-n y)来选取指定位置的元素。其中，n代表位置的起点，x代表要选取的元素的起始位置，y代表要选取的元素的结束位置。举例来说，如果要选取第3个到第6个之间的元素，可以使用:nth-child(n 3):nth-child(-n 6)。这样可以选中第3、4、5和6个元素。请注意，顺序很重要，先写:nth-child(n x)，再写:nth-child(-n y)。123 #### 引用[.reference_title] - *1* [css选择器:nth-child(n)选择前几个元素](https://blog.youkuaiyun.com/WANGBUZHIQ/article/details/121473435)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [css : nth-child 选取前三个元素，选取第三个和第六个之间的元素](https://blog.youkuaiyun.com/weixin_54645575/article/details/126125750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]