. nth-child 详解

最新推荐文章于 2024-02-18 00:11:54 发布
最新推荐文章于 2024-02-18 00:11:54 发布
阅读量522 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MR_JIABing/article/details/110915108
版权

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

贾兵BING
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解CSS3选择器:nth-child和:nth-of-type之间的差异
09-24
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异，非常具有实用价值，需要的朋友可以参考下
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
CSS的伪类选择器:nth-child()
最新发布
kfepiza的博客
02-18 1167
第一个匹配的元素是 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与nth-of-type的元素查找方式
01-19
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代码如下 <div> <div xss=removed> <p>pgh1</p> <p>pgh2</p> <p>
CSS中的nth-child()属性
欢欢的博客
10-27 3万+
first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child， 但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
嗨，朋友你好！我是前端领域的工作者
06-30 2742
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
nth-child选择器 | 属性选择器详解
GR6080的博客
01-06 1万+
前端的兄弟想必都接触过CSS中一个神奇的玩意，不用添加class名可以轻松获取你想要的标签并给与修改添加样式，是不是很给力，它就是：nth-child 与 属性选择器
css选择器:nth-child()的用法
得意小门生的博客
10-13 6万+
: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
nth:child()选择器
qq_46241430的博客
04-04 1331
:nth-child()的理解和使用
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4214
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
几张图浅理解（会用） :nth-child()
a666666000的博客
09-20 1757
几张图带你浅理解（会用） :nth-child()
CSS3:nth-child选择器基本用法简述
02-23 3117
选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n可以是一个数字，一个关键字，或者一个公式。注释：n从1开始p:nth-child(数字)p:nth-child(3)表示给第三个元素（P3）添加背景色接着上面的示例，如果p元素前面还有一个元素,如下图所示，P2被添加了背景色，而不是P3因为这里的p:nth-child(1) 为h1元素，p:nth-child(2)才为p元素首先定位p的父元素，父元素下的第n个元素为当前元素，css才会生效。
css3--nth-child的用法
m0_58065010的博客
06-08 2254
选择器查看的是元素在其父元素中的位置，而不是它在文档中的位置或它在其类别中的位置。所以，如果你有一个列表，它包含两种不同的类元素，希望这篇文章能帮助你更好地理解这个强大的选择器，并在你的下一个项目中找到它的用途。选择器是一个强大的工具，允许我们根据它们在父元素中的位置选择元素。是从1开始计数的（在HTML中，第一个元素的索引为1），但在。实际上不会选择任何第0个子元素，因为没有第0个子元素。是一个整数，表示要选择的子元素的位置。会考虑所有的子元素，而不仅仅是特定的类别。实际上在选择所有偶数位置的元素，而。
详解CSS3中:nth-child的用法
z983002710的博客
06-30 1万+
详解CSS3中:nth-child的用法
css3 :nth-child()选择器的使用
蹦极的考拉
08-14 515
一、nth-child() 1. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。 2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。 3. ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。 4. nth-child(an+b)...
:nth-child()选择器用法
weixin_51109349的博客
11-12 8526
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 . . :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 公式 (an + b)。 描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 1. :nth-child(2) 获取到第二个标签 2.:nth-child(2n) 选取偶数标签，等同于:nth-child(even) 3.:nth-ch
【CSS】:nth-child()选择器的用法
y_coder的博客
05-22 1523
::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。这使得 &::nth-child 在选择灵活位置上的元素时非常有用。使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。，其中 n 是一个表示位置的参数。
【css选择器】nth-child()的相关用法
A Lucky Boy的博客
05-14 5164
目录 前言 一、列表中的偶数标签 :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(...
.seat:nth-child(8n-6),.seat:nth-child(8n-2)
11-23
根据提供的引用内容，`.seat:nth-child(8n-6),.seat:nth-child(8n-2)`是一个jQuery选择器，它选中了父元素下每8个元素中的第2个和第6个元素，且这些元素都有`.seat`类。具体来说，它选中了以下元素： - 父元素下第2个`.seat`元素 - 父元素下第6个`.seat`元素 - 父元素下第10个`.seat`元素 - 父元素下第14个`.seat`元素 - ... 这个选择器可以用于选中一排座位中的某些座位，例如： ```html <div class="seats"> <div class="seat">1</div> <div class="seat">2</div> <div class="seat">3</div> <div class="seat">4</div> <div class="seat">5</div> <div class="seat">6</div> <div class="seat">7</div> <div class="seat">8</div> <div class="seat">9</div> <div class="seat">10</div> <div class="seat">11</div> <div class="seat">12</div> <div class="seat">13</div> <div class="seat">14</div> <div class="seat">15</div> <div class="seat">16</div> <div class="seat">17</div> <div class="seat">18</div> <div class="seat">19</div> <div class="seat">20</div> </div> ``` 如果想选中第1排、第3排、第5排等奇数排的座位，可以使用以下选择器： ```css .seats:nth-child(odd) .seat:nth-child(8n-6), .seats:nth-child(odd) .seat:nth-child(8n-2) { background-color: red; } ``` 这个选择器选中了`.seats`的奇数子元素（即第1排、第3排、第5排等），然后选中这些子元素下每8个元素中的第2个和第6个元素，将它们的背景色设置为红色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值