nth-child渲染大全

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

:nth-child渲染大全

选择器解释
:nth-child(3)渲染第三个元素
:nth-child(n)渲染n个元素(从1…n)
:nth-child(n+3)从第三个元素开始渲染(3,4,5…n)
:nth-child(2n)/even以2的倍数渲染元素(2,4,6,8…2n)
:nth-child(2n+1)/odd按照(1,3,5,7…2n+1)渲染
:nth-child(-n+5)渲染1–5个
:nth-child(n):not(:nth-child(5n))从1到n,但不包含以5为倍数的元素

由此看出n是从0开始涨,并非是从1开始

洛阳处处是月明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nth-child 实用技巧
大概关于
01-16 6475
nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。 选择器是什么 类似： #container 选择页面上 id 为 container 的元素 .wrapper 选择别面上 class 为 wrapper 的元素 p 选择页面上所有 p 元素 … nth-child 同以上这些一样，只不过没那么常见...
firstchild-lastchild
03-11
同时，它们与`nth-child()`、`nth-of-type()`等其他伪类选择器一起使用，可以实现更复杂的布局和样式设计。 `firstchild-lastchild-master`这个文件名可能表示一个项目或教程，专注于讲解如何利用`first-child`和`...
:nth-of-type 和 :nth-child 伪类别再傻傻分不清
fe_watermelon的博客
04-12 661
大家好，我是前端西瓜哥。今天我们来学习一些长得很像的两兄弟 :nth-of-type 和 :nth-child。:nth-child首先根据 :nth-chilid 前的样式规则，找到所有匹配元素的所有兄弟元素。然后我们从中找出 符合位置规则 的元素，并且这些元素也 符合样式规则，就应用样式。这个位置规则其实是一个 an + b 的表达式。其中 a 和 b 表示一个类型为整数的常数，如果值为 0，可以省略不写。n 是一个变量，为从 0 开始的递增整数集合。这里我们给几个表达式例子：nth
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_52966774的博客
08-04 394
微信小程序nth-child问题
nth-child选择前几个元素
qq_43437571的博客
03-19 327
渲染列表时，需要设置前3个元素的margin-top值与其他的不同： :nth-child(-n+3){ margin-top: 15px; } 扩展 选择前几个元素： /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-child(n+6){} 两者结合使用，可以限制选择某一个范围 /*【限制范围】选择第6个到第9个，取两者的交集 */ :nth-child(-n+9):nt
nth-child和nth-of-type的区别
ccattempt的博客
02-10 1763
nth-child和nth-of-type是比较常用的一个伪类选择器，过去一直没在意这个，今天发现原来他们之间还有这样的区别，记录一下。 我们首先来看MDN上对它们的解释： :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...） :nth-of-type(an+b) 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选.
html相同标签nth,比较CSS3选择器:nth-child和:nth-of-type之间的区别
weixin_39948277的博客
06-27 250
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异，非常具有实用价值，需要的朋友可以参考下先看一个简单的实例，首先是HTML部分：我是第1个p标签我是第2个p标签 然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现...
excel-style-demo2.rar
01-21
`来实现无间隙的边框，使用`:nth-child()`选择器来为奇偶行添加不同的背景色。 3. **JavaScript库** 多个JavaScript库，如Handsontable、ag-Grid、Datatables等，提供了更高级的功能，如排序、过滤、分页等，同时...
Chess-Board:棋盘设计
05-28
#chess-board div:nth-child(odd):nth-child(even), #chess-board div:nth-child(even):nth-child(odd) { background-color: black; } ``` 最后，为了使棋盘具有交互性，我们需要添加事件监听器，处理用户的点击...
css基础4-浮动布局
12-05
结构伪类选择器的基本语法是：`:nth-child(n)`，其中 `n` 是一个数字，表示选择第 `n` 个子元素。 例如，`:nth-child(2)` 将选择第二个子元素。 结构伪类选择器的注意点： * `n` 可以是 0、1、2、3、4、5、6 等...
用CSS JS控制Li背景颜色交替.rar
07-05
例如，我们可以用CSS伪类`:nth-child()`来实现奇偶行颜色交替的效果： ```css ul li:nth-child(odd) { background-color: #f2f2f2; } ul li:nth-child(even) { background-color: #ffffff; } ``` 这段代码会...
css中伪元素 :: before的用法
金木编程
07-05 224
在这个例子中，CSS规则 ::before 将在类为 example 的元素前插入一个金色的星星符号。这样，你在HTML中只需要定义一段文本，通过CSS可以很容易地在它前面添加图标或装饰性的内容。在CSS中，伪元素 ::before 用于在选定元素的内容前插入内容。它常用于添加图标、文本或装饰性的元素，而不需要在HTML中实际添加额外的标签。::before 伪元素对于丰富网页内容和设计非常有用，特别是在需要在不改变HTML结构的情况下添加装饰性元素时。::before 属性详解。
css使用伪元素after或者before的时候想要给after设置z-index无效
qq_49416650的博客
07-05 274
css使用伪元素after或者before的时候想要给after或者before设置一个层级关系，使该伪类写入的样式在box的下面，发现给box设置z-index无效，需要找到父级元素，在父级元素上设置z-index值并且将伪类设置z-index:-1。
html高级篇
qq_48257021的博客
07-04 757
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
暑假前端知识速成【CSS】系列一
最新发布
大学生小郑的博客
07-05 995
暑假速成前端知识（基于黑马）
Vite 中怎么添加全局 scss 文件
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-05 351
通过这些步骤，你就可以在 Vite 项目中成功添加并使用全局 SCSS 文件了。这种方法可以让你在整个项目中共享 SCSS 变量、mixins 和其他全局样式，提高代码的复用性和维护性。注意，对于 mixin 文件，需要在 vite.config.ts 中进行配置，而不是在 main.ts 中直接导入.当我们使用 scss 时，希望能够把一些定义变量，定义mixin 的文件全局加载，避免每处用到还要单独引入这些文件。在 src 目录下创建一个 styles 文件夹，并添加你的全局 SCSS 文件，例如。
前端学习（三）CSS介绍及选择符
Janice01的博客
07-04 177
2024/7/4。
nvue :nth-child(4n)没用
08-20
根据提供的引用内容，nvue中的:nth-child(4n)选择器是无效的。nvue是uni-app框架下的一种小程序开发模式，它支持使用Vue语法进行开发。在原生小程序中，:nth-child(4n)选择器是有效的，可以用来选择每四个元素中的第...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值