针对nth-child(n) 使用方法的总结：

最新推荐文章于 2024-07-16 16:07:08 发布
最新推荐文章于 2024-07-16 16:07:08 发布
阅读量7.3k 收藏 8
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/big_minggogo/article/details/126135148
版权

针对nth-child(n) 使用方法的总结：

1、:nth-child(1) 选择第一个子元素
2、:nth-child(-n+2) 选择前两个子元素
3、:nth-child(n+2) 选择后两个子元素
4、:nth-child(2n) 选择列表中为偶数的元素
5、:nth-child(2n-1) 选择列表中为奇数的元素
6、:nth-child(n+6):nth-child(-n+9) 结合使用，选择一列元素中的中间几个
举例为从第六个到第九个

拾文断字
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。 描述： 伪
jQuery中:last-child选择器用法实例
10-24
主要介绍了jQuery中:last-child选择器用法,实例分析了:last-child选择器功能、定义及匹配父元素的最后一个子元素用法技巧,具有一定参考借鉴价值,需要的朋友可以参考下
关于 ：nth-child(n) 和 ：nth-of-type(n)的个人理解
weixin_45631494的博客
04-15 706
1、：nth-child(n) → 第n个儿子 选中某个元素所有儿子中的老几。关注的是所有儿子中的整体排名（所要的儿子排在第几个） 比如：p：nth-child(1) 先找p的父元素，然后找父元素第 1 个子元素，要是第 1 个子元素是 p ， 则所设置样式生效，反之所设置样式不生效。 总之使用：nth-child（n）的三部曲为： **先 找 父元素，然后 再找 父元素的第 n 个...
css3 :nth-child()选择器的使用
蹦极的考拉
08-14 615
一、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)...
CSS选取第几个标签元素：nth-child(n)、first-child、last-child
hangGe0111的博客
12-06 2263
转载：https://blog.csdn.net/longgeaisisi/article/details/78154169 nth-child（n）、first-child、last-child用法 注：nth-child(n)选择器匹配父元素中的第n个子元素。  n可以是一个数字，一个关键字，或者一个公式。 1.nth-child（n）用法：  1.1 nth-child(3)  表示选择...
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
css选择器:nth-child(n)选择前几个元素
WANGBUZHIQ的博客
11-22 8732
学习记录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
:nth-child(n) 的使用
liangyk1005的博客
05-19 1150
:nth-child(n) 选中父元素下的第n个子元素，n从1开始，元素类型没有限制 可在前面指定要选中的标签类型，如 p:nth-child(n) ,注意这里的p不是父元素，而是子元素的标签类型 可以指定父元素 ，如 #box p:nth-child(n) 选中box下的第n个p元素，这里的#box指的才是父元素 注意区分哪个是指定子元素类型，哪个是指定父元素 ...
CSS 选择器 nth-child 的几种用法
weixin_33701617的博客
05-15 814
开发过程中会碰到一些选择器的要求 比如选择第一项，或者第几项 或者最后一项这些常见的用法 first-child first-child：选择列表中的第一个标签。 last-child last-child：选择列表中的最后一个标签。 nth-child(n) nth-child(n)：选择列表中的第 n 个标签。 nth-chi...
CSS3:nth-child选择器基本用法简述
qq_42000887的博客
09-15 3152
nth-child介绍
nth-child-grids：与nth-child一起练习
02-14
3. **间隔和对齐**：使用`grid-gap`属性来设置网格项之间的间距，确保网格布局的美观。 4. **自适应布局**：利用媒体查询（media queries）使网格在不同屏幕尺寸下具有响应性。可以针对小屏幕设备更改网格的列数或...
使用css属性:nth-child(n)匹配选择第n个子元素
09-25
同时，`:nth-child(n)`还可以与其他CSS选择器一起使用，如类选择器 `.class` 或 ID 选择器 `#id`，以增加选择器的特异性，使得样式规则更精确地匹配目标元素。 总的来说，`:nth-child(n)`是CSS中一个强大的工具，它...
CSS3中:nth-child和:nth-of-type的区别深入理解
09-25
在实际应用中，`:nth-child` 更常用于对一系列不固定类型的元素进行排序，比如在网格布局中，而 `:nth-of-type` 则更适合针对同类型的元素进行精细化控制，如在列表项或段落等重复元素中。 了解并熟练掌握这两个...
css-for-beginners:JS BangladeshCSS3入门课程的源代码
05-12
2. **结构伪类选择器**：`:nth-child(n)`、`:nth-of-type(n)`允许你基于元素在父元素中的位置来选择元素。 3. **属性选择器**：允许根据元素的属性和值来选择元素，如`[target="_blank"]`选择所有目标为新窗口的链接...
:nth-child()选择器用法
weixin_51109349的博客
11-12 8623
: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 1896
::nth-child 还支持使用公式来选择元素，例如 2n+1 表示选择奇数位置的元素，3n 表示选择位置是 3 的倍数的元素等等。这使得 &::nth-child 在选择灵活位置上的元素时非常有用。使用 &::nth-child 可以根据元素在其父级元素中的位置应用样式。例如，你可以使用它来选择列表中的奇数或偶数行，或者选择特定位置上的元素。这意味着第一个元素的位置是 1，第二个元素的位置是 2，以此类推。，其中 n 是一个表示位置的参数。
Css-:nth-child 的用法
wax9092的博客
06-04 5323
主要例举了一下css :nth-child 伪类选择器用法
CSS :nth-child选择器终于搞清楚怎么用，实例详解
weixin_47378963的博客
02-16 2174
该选择器选择的是A选择器选择的元素的父元素中的第n个子元素，而且在匹配的阶段并没有元素类型的限制，但是，到了样式设置的阶段，却又有了元素类型的限制，比如p:nth-child(n)匹配p元素的父元素中的第n个元素，如果第n个元素刚好是p，则进行样式设置，如果不是p，比如是h2，则不会进行相关的样式设置。刚接触到CSS的:nth-child伪类选择器的时候，也是晕头转向的，搞不清楚“:nth-child(n) 选择器选择的是其父元素中的第 n 个子元素,而且元素没有类型限制”这句话是什么意思。
【学习css3】使用flex和grid实现等高元素布局
最新发布
wenhui的博客
07-16 154
过往的实现方法是使用浮动加计算布局来实现，当flex和grid问世时，这一切将变得简单起来。二、每行放置3列，多出来的自动到下一行。1、还是先看页面效果。
使用:nth-child(n)和:nth-last-child(n)选择器
03-31
:nth-child(n)和:nth-last-child(n)选择器都是CSS3中的伪类选择器，用于选择元素中的特定位置。 :nth-child(n)选择器选取父元素中第n个子元素。例如，:nth-child(2)会选取父元素中的第二个子元素。 :nth-last-child(n)选择器也是选取父元素中的第n个子元素，但是是从最后一个子元素开始计算的。例如，:nth-last-child(2)会选取父元素中的倒数第二个子元素。 这两个选择器也支持一些关键词： - even：选取偶数位置的子元素 - odd：选取奇数位置的子元素 - n：选取任意位置的子元素 示例： 以下是一个HTML列表： <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul> 使用:nth-child(n)选择器可以选取特定位置的项： ul li:nth-child(2) { color: red; } 这个样式规则将把第二项的文本颜色设为红色。 使用:nth-last-child(n)选择器同样可以选取特定位置的项： ul li:nth-last-child(2) { background-color: yellow; } 这个样式规则将把倒数第二项的背景颜色设为黄色。 使用关键词even和odd可以选取偶数或奇数位置的项： ul li:nth-child(even) { background-color: lightgray; } 这个样式规则将把列表中偶数项的背景颜色设为浅灰色。 ul li:nth-child(odd) { background-color: lightblue; } 这个样式规则将把列表中奇数项的背景颜色设为浅蓝色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值