:nth-child()应用

最新推荐文章于 2024-05-16 14:52:59 发布

skt__

最新推荐文章于 2024-05-16 14:52:59 发布

阅读量574

点赞数 3

文章标签： html5 css 前端 html

本文链接：https://blog.csdn.net/skt__/article/details/119044556

版权

: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个标签

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

skt__

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

nth-child 实用技巧

大概关于

01-16

6561

nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。选择器是什么类似： #container 选择页面上 id 为 container 的元素 .wrapper 选择别面上 class 为 wrapper 的元素 p 选择页面上所有 p 元素 … nth-child 同以上这些一样，只不过没那么常见...

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

09-25

在CSS3中，引入了伪类选择器 nth-child()，它允许开发者对元素进行更复杂的匹配，比如选择奇数行或偶数行并应用不同的样式，这对于网页中的表格或列表项尤为有用。 nth-child() 伪类选择器的参数形式为 an+b，其中a...

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

Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child(2)

最新发布

2401_84618926的博客

05-16

300

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】li:last-child { /\*给最后一个列表项目设置样式 IE8不兼容\*/解析：一个页面中无论有几个ul列表，只要设置`first-child、last-child`，那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。### 2.nth-child、nth-last-child （IE8不兼容）

【css】8.nth-child(2)

jieweiwujie的博客

12-28

889

div:nth-child(1)

css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type

erdouzhang

04-27

1563

first-child、last-child、nth-child、nth-last-child、nth-of-type1.first-child（IE7兼容）、last-child（IE8不兼容）html：<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4

nth-child()用法

qq_57567988的博客

03-29

217

1、2、3为父级下的同级元素，我的 nth-child(2)选到的是时间这行，颜色设置为白色。nth-child()可以绑定父级下的同级元素。

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

12-11

1. **简单数字序号写法**: `:nth-child(number)`，例如`li:nth-child(3)`，将选择父元素下的第三个`li`元素，并应用相应的样式。`number`必须是大于0的整数。 2. **倍数写法**: `:nth-child(an)`，如`li:nth-child...

使用css属性:nth-child(n)匹配选择第n个子元素

09-25

在实际应用中，`:nth-child(n)`经常与伪类如`:hover`、`:active`和`:focus`结合使用，以实现更精细的交互效果。同时，`:nth-child(n)`还可以与其他CSS选择器一起使用，如类选择器 `.class` 或 ID 选择器 `#id`，以...

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

10-24

在Web开发中，jQuery提供了非常强大的选择器来帮助我们选取页面元素，其中之一是:nth-child选择器，它用于...通过这个例子，我们可以看到nth-child选择器是如何工作的，以及如何将它的功能应用于实际的Web开发场景中。

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

11-21

`nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-child(1)`会选择父元素的第一个子元素，`nth-child(3)`会选择第三个子元素。然而，这个特性在IE8及以下...

微信小程序——:nth-child等在小程序中使用

我是我

05-27

4170

Vue中，父组件列表引入每一个子组件元素的时候，可以在父组件的CSS文件中设置子组件的margin，可以通过样式穿透在父组件设置子组件:nth-child(2n)为0等，那么在小程序中是如何实现的呢？父组件： WXML <view class="getnotice-list"> <t-notice-item class="getnotice-list-item" wx:for="{{getnotice}}" wx:key="index" content="{{item}}"

2024年Web前端最全阿里大佬把近20年的DBA经验编写成了这份SQL高效优化笔记，阿里P7大佬手把手教你

2401_84434237的博客

05-05

296

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它需要获取的小·伙伴可以直接添加小助手微信：Mxy98811即可免费获取引入篇SQL案例部分原理篇SQL篇实践篇总结函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着纯函数 / 函数复合 / 数据不可变，谨慎对待函数内的状态共享 / 依赖外部 / 副作用；

2024年Web前端最全【经验分享】显示文件扩展名，一个三非渣本的前端校招秋招之路

2401_84438654的博客

05-04

409

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总如何在.java文件和记事本之间通过改扩展名快速切换呢？首先打开此电脑（我的电脑）找到左上角的这个东西。

:nth-child()选择器用法

weixin_51109349的博客

11-12

8681

: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

first-child和last-child选择器 nth-child(n）第几个元素 nth-last-child(n)倒数第几个元素...

weixin_30263277的博客

03-12

902

：first-child 和：last-child 分别表示父元素中第一个或者最后一个子元素设置样式，如上图转载于:https://www.cnblogs.com/agansj/p/8552189.html

nth-child详解（转）

weixin_42794596的博客

10-09

386

li:first-child{ color:blue; } li:last-child{ color:blue; }

详解CSS3中:nth-child的用法

aa_mmnn的博客

09-10

2022

CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！（1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同 .demo01 li:nth-child(n+4){background:#090} （2）:nth-child(-n + 4)选取小于等于4的标签 .demo01 li:nth-child(-n+4){background:#090} （3）:nth-child(2n)选取偶数标签，其中的2n也可以写

详解CSS中:nth-child的用法

jie566的专栏

05-24

1441

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！ :nth-child(2)选取第几个标签，“2可以是你想要的数字” 实例：代码： .demo01 li:nth-child(2

nth-child()选择器详解

qq_38868959的博客

08-21

894

CSS3 :nth-child() 选择器下面展示一些实例。 <body> <div> <h1>这是一个标题</h1> <p>这是第一个段落。</p> <p>这是第二个段落。</p> <p>这是第三个段落。</p> <p>这是第四个段落。</p> </div> </body> 1.设置第一个p元素