css nth-of-type nth-of-child(公式)

最新推荐文章于 2024-03-05 10:34:17 发布
最新推荐文章于 2024-03-05 10:34:17 发布
阅读量1.7k 收藏 7
点赞数 2
文章标签： css nth-of-type
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HangMine/article/details/80449544
版权

知识点:

1.nth-of-type公式里的n是从0开始计算

2.nth-of-type获取到的元素，是从1开始计算

3.如果需要获取或排除前面的元素，用nth-of-type

   如果需要获取或排除前面的元素，用nth-last-of-type

例子：

1.获取前三个：nth-of-type(-n+3),从n=0开始计算，分别得到第3，第2，第1个元素

2.获取前三个除外的：nth-of-type(n+4),从n=0开始计算，分别得到第4，第5，第5+个元素

3.获取后三个：nth-last-of-type(-n+3),从n=0开始计算，分别得到从后面数起的第3，第2，第1个元素

4.获取前三个除外的：nth-last-of-type(n+4),从n=0开始计算，分别得到从后面数起的第4，第5，第5+个元素


HangMine
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css :nth-child与:nth-of-type之小解
09-25
总之，理解并熟练运用`:nth-child()`和`:nth-of-type()`选择器对于编写高效且精确的CSS至关重要。在设计网页布局和交互时，根据实际需求选择合适的选择器，能够提高代码的可读性和维护性。同时，考虑到浏览器兼容性...
详解css3中的:nth-of-type(n)
热门推荐
冰雪为融的博客
06-04 3万+
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。先来看个简单的例子理解一下上面的意思：HTML代码如下<div id="wrap"> <p>one</p> <div>我是div</div> ...
关于nth-of-type()
yuanxu21的博客
03-09 222
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 规定属于其父元素的第二个 p 元素的每个 p： p:nth-of-type(2) { background:#ff0000; }
CSS中的:nth-of-type(n)和:nth-child(n)
树上骑个猴的博客
12-24 1055
:nth-of-type(n) :nth-of-type() CSS 伪类 匹配同类型中的第n个同级兄弟元素。 先来看个简单的例子理解一下上面的意思： <style> #wrap p:nth-of-type(3) { background: red; } #wrap p:nth-child(3) { background: yellow; } </style> </head> <body> <div id="wrap"> <
css输入一个实数和整数,详解CSS中:nth
weixin_30798867的博客
08-04 431
前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：Tips：还用低版本的IE浏览器的哥们请绕过！:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:n...
nth-type-of nth-child(n) eq(n)区别
LONGSHAN123456789的博客
09-24 588
nth-child() inex 1-n   nth-type-of() index 1-n     jquery eq:()index 0-n-1          p:nth-child(2) 选择器匹配属于表示这个元素要是p标签，且是第二个子元素       :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。          p:nth-chi
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
详解CSS nth-child与nth-of-type的元素查找方式
01-19
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
css属性选择器关于-of-type 和-child
impress1234的博客
05-18 398
例：p:only-of-type 当p 的父元素中有且仅有一个p元素时（p的父元素还是允许有其它类型的子元素的），这个p元素被选中例：p:only-child     当p  的父元素中有且仅有一个子元素，且这个子元素是p 时，这个p元素被选中 ...
of-type和child的区别
gqomg的专栏
05-30 530
nth-of-type,nth-last-of-type 先排除非指定标签再进行排序 nth-child,nth-last-child不排除非指定标签进行排序 only-of-type 不允许包含非指定标签 only-child 允许包含非指定标签 但只能有唯一指定标签  first-child,last-child 第一个必须是指定标签才有效， first-
css选择器之nth-of-type
qq_42451776的博客
09-04 357
// 3个后包括3 li:nth-of-type(n+3) { // 使用3+n是错的 background-color: red; } // 前3个 li:nth-of-type(-n+3) { // 使用3-n 是错的 background-color: red; }
关于css3中nth-of-type()的使用
josonho
07-24 1122
nth-of-type(n)选择器用于匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。（ps：n不能为判断语句） p:nth-of-type(n=2) ---------- 错误，不能为赋值语句 p:nth-of-type(n==2)-------- 错误，不能为布尔型 p:nth-of-type(2) ------------- 正确，选取第二个p元素 p...
CSS3新增
m0_46893049的博客
03-09 277
CSS3 属性选择器 CSS 属性选择器通过已经存在的属性名或属性值匹配元素。 类选择器、属性选择器、伪类选择器，权重为10。 [attr] 表示带有以 attr 命名的属性的元素。 [attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。 [attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。(至少包含一个独立的单词value) [attr|=value] 表示带有以 at
对于nth-of-type(n)的理解
corn78的博客
11-24 9784
定义和用法： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 一、nth-of-type(n) (当n为数字时） 先看下代码，在代码中具体讲解。 这里我们在一个类名为father的盒子中写了五个p标签，样式表中用到了我们的nth-of-type伪类，这个样式也不难看懂。我们把这个选择器拆分开来理解，首先.father...
nth-of-type和nth-child的区别与相关使用
djh052900的博客
07-04 3192
nth-of-type和nth-child的区别与相关使用，选取前几个，选取后几个，选取前几个和后几个， 选取第几个到第几个等等
css3选择器nth-of-type属性作用及用法剖析
最新发布
前端开发UI设计老司机-艾斯视觉
03-05 1496
CSS3中的nth-of-type选择器允许我们根据元素类型和位置来定位特定的元素。本文将深入探讨nth-of-type属性的作用，并提供详细的用法示例。
:nth-of-child和:nth-of-type
zkx529的博客
03-22 609
用法： :nth-of-child（n）, n可以为数字或者表达式（例如2n + 1，指的是奇数项）介绍： 第n个孩子例如 div:nth-of-child（1） 等同于 div:first-of-child div的第一个孩子元素（不区分标签和类名）会选中
CSS高级技巧
CC的博客
05-19 993
精灵图 1.为什么需要精灵图： 核心原理：将网页中的一些小背景整合到一张大图中，这样服务器只需要请求一次 目的：为了有效减少服务器接收和发送请求次数，提高页面的加载速度 2.精灵图的使用 核心：主要针对背景图片使用 （需要精确测量） 实践：使用精灵图拼出自己的名字 代码： html： <div class="jingling"> <div class="c"></div> ...
css简易的进度条
qq_45723045的博客
10-22 802
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
css3中nth-child与nth-of-type
09-10
nth-child和nth-of-type是CSS3中的伪类选择器，它们允许你根据元素在其父元素中的位置来选择元素。 nth-child选择器选取父元素中的某个特定位置的子元素。它接受一个参数n，表示选择每隔n个子元素。例如，nth-child(3n)会选择每隔3个子元素的元素。如果参数是一个常数（如2、3、4等），则会选择具有与该常数相同索引的元素。 nth-of-type选择器与nth-child类似，但只会考虑同类型的子元素。它也接受一个参数n，表示选择每隔n个同类型子元素。例如，nth-of-type(2n)会选择每隔2个相同类型的子元素。 以下是一些示例： ```css /* 选择第一个子元素 */ :nth-child(1) { /* 样式 */ } /* 选择偶数位置的子元素 */ :nth-child(even) { /* 样式 */ } /* 选择奇数位置的同类型子元素 */ :nth-of-type(odd) { /* 样式 */ } /* 选择第3个、第6个、第9个等位置的同类型子元素 */ :nth-of-type(3n) { /* 样式 */ } ``` 请注意，参数n是从1开始计数的，并且可以是负数。这些选择器在创建网格或布局时非常有用，可以帮助你选择特定位置的元素并应用样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值