:nth-child 用法 CSS

最新推荐文章于 2024-08-26 16:48:02 发布
最新推荐文章于 2024-08-26 16:48:02 发布
阅读量404 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyugyug/article/details/102596832
版权

: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-last-child(n) 选取倒数第n个子元素

前后限制范围：
:nth-child(n+2):nth-child(-n+4) 选取第2个到第4个子元素

sgjbcbhsbvrj
关注
css选择器:nth-child()的用法
丹
10-10 4027
: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-child() 选择器 :nth-last-chil
【CSS】:nth-child()选择器的用法
y_coder的博客
05-22 2106
::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。这使得 &::nth-child 在选择灵活位置上的元素时非常有用。使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。，其中 n 是一个表示位置的参数。
li:nth-child(1)---div:nth-child(-n+2) 详解
Alisa_wu666的博客
09-08 3598
我总是会有点奇葩的烦恼，如果看这个列子会更加明白 $("#box li:nth-child(1)").css("color", "red"); 通俗的理解就是选择box 下面第一个li?后面自己写了一次，发现不对，ppp下面的每个li 都被选中了 <div id="box"> <ul> <li>John1</li> <li>Karl</li> <li>B.
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-child()
kfepiza的博客
02-18 2380
第一个匹配的元素是 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 个，且为 元素的元素。
nth-child选择（小研究）
天空影
12-13 1876
nth-child用法 小研究
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
CSS3伪类选择器：nth-child()
12-11
CSS3的:nth-child()伪类选择器是一种强大的样式选择工具，允许开发者更加精确地选取页面中...因此，了解并掌握:nth-child()等CSS3选择器的用法对于前端开发者来说至关重要，它将有助于提升网页设计的美观性和用户体验。
使用css属性:nth-child(n)匹配选择第n个子元素
12-13
table tr th:nth-child(2) </style> <table> <tr> 第一个</th> 第二个</th> 第三个</th> </tr> </table> 定义： :nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素...
css :nth-child与:nth-of-type之小解
09-25
CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...
css 获取从第n个开始之后的所有元素
09-22
主要介绍了css 获取从第n个开始之后的所有元素 ,需要的朋友可以参考下
CSS 结构伪类选择器（nth-child的几个使用小技巧）
Ares5k
04-06 1342
nth-child的几个使用小技巧
CSS3伪类子代选择器nth-child(),first-child的用法！
海贼王某人的博客
01-15 1912
先来段HTML代码 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 选择box里面第一个div添加样式： .box > div:first-child { color: #7F7F7F;
css3类选择器nth-child nth-of-type的使用与区别
lsylhx123的博客
07-11 542
区别: ele:nth-child(n),先计算是第几个节点，2,然后再判断选择器。指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 :nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
关于:nth-child(n) nth of type
m18697787579的博客
11-15 150
nth-child(n+2) 选中第二个开始的子元素 nth-child(-n+2) 选中前两个子元素 :nth-child(n+6):nth-child(-n+7) 选中第6第7个子元素 :nth-child(odd) :nth-child(even)
详解CSS中:nth-child的用法
蕉下客
07-13 2619
jquery选择器功能强大，最近设置样式的时候把css和jquery选择器混了，现写出帖子提醒自己：下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！特别注意：jquery:eq()选择器下标从0开始，nth-child(**)从1开始，而css中nth-child(**)下标从1开始。:nth-child(2)选取第几个标签，“2
CSS3新增结构伪类选择器 - 选择第n个元素、nth-child
最新发布
听海边涛声
08-26 474
CSS3新增结构伪类选择器 - 选择第n个元素、nth-child
CSS3新增选择器nth-child等
a1209849629的博客
04-14 2109
CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 <style type="text/css"> .list div:nth-child(2){ background-color:red; } </style> ...... <div class="list">...
css获取同类名下的第二个开始
weixin_43827751的博客
12-17 3728
css css获取同类名下的第二个开始 代码如下 .first-box:nth-of-type(n+2){ margin: 0 auto; margin-top: 30px; }
CSS:first-child 和 nth-child 的区别及用法详解
08-02
`first-child` 和 `nth-child` 都是 CSS 伪类选择器，用于选取HTML元素中的特定位置的子元素，但它们的功能和用法略有不同： 1. **`:first-child`**: - 描述：这个选择器匹配某个元素的第一个子元素。这意味着只有当元素有一个直接的子元素时，它才会应用样式。 - 示例：`.parent :first-child { color: red; }` 会选择`.parent`下第一个直接子元素并改变其颜色。 - 注意：如果`.parent`是一个空元素（如`<div>`），`first-child`不起作用。 2. **`:nth-child(n)`**: - 描述：这个选择器匹配所有具有指定序数的子元素。`n`可以是一个数字、关键字（如even/odd）、公式（如`2n+1`）等，表示第几个子元素应该匹配。 - 示例：`.parent :nth-child(2) { background-color: yellow; }` 会选中`.parent`下的第二个子元素设置背景色。 - 特别地，`:nth-child(even)`和`:nth-child(odd)`分别选取偶数索引和奇数索引的子元素。 使用场景上，`first-child`通常用于针对列表项、导航链接或其他有明确开始位置的情况，而`nth-child`则更适用于需要基于任意顺序选择元素的动态布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值