css class:nth-of-type 无效

已于 2023-11-17 18:43:56 修改
阅读量707 收藏
点赞数
文章标签： css 前端
于 2022-12-14 10:22:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcc2001/article/details/128312240
版权

如：.box-0:nth-of-type(2n-1)

<tr class="box-0">
    <td>1</td>
</tr>
<tr class="box-1">
    <td>2</td>
</tr>
<tr class="box-0">
    <td>3</td>
</tr>

我之前的理解是

选择奇数的.box的类元素

所以会选中1，不会选中3

但理解错了......

结果是选中了1和3

正确的理解应该是

选择奇数的.box的类的标签名为tr的元素

仔细点说是

选择奇数tr且类名为box-0的元素

首先要是奇数的tr，类还要是box-0才会被选中

所以nth-of-type还是必须和标签关联到。。。

xiaoli_qidian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
:nth-of-type()不起作用
goutinga的博客
12-20 1099
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .test:nth-of-type(1) { background: pink; } </style> </head>
css :nth-child与:nth-of-type之小解
01-19
} p:nth-of-type(2) { color: red;} 但两者是存在差异的 :nth-child 选择器，在此例子中意思就是指 1.首先是个p元素 2.其次这个p元素是其父元素的第二个孩子 :nth-of-type 选择器，在此例子中意思就是指 1.定位一个...
CSS3中:nth-child和:nth-of-type的区别深入理解
12-13
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 这里附上一个小例子： 复制代码代码如下: <div> <ul clas
小程序不支持nth-of-type
weixin_37787294的博客
08-03 929
不支持 可以
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4225
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
css---------selector
weixin_30940783的博客
10-08 199
1.根据状态或者位置的选择器（:） .class:hover .class:focus .class:active .class:visited .class:last-child .clsss:first-child .class:only-child;.class是父类中的唯一一个子类，才被选中； <div> <p>hello</p...
nth-of-type 使用class 详情
web_ding的博客
08-23 489
nth-of-type里既然有个type，就表示它是按照元素类型来进行选择的，它的选择范围是父元素下某一种元素类型的集合。ele:nth-of-type(n)表示选择父元素下的第n个ele元素，其中n可以是正整数、公式或者关键字。n为正整数，如p:nth-of-type(2)表示选择父元素下的第2个p元素。n为公式，如p:nth-of-type(2n+1)表示选择父元素下的每一个奇数项的p元素。n为关键字，有even(偶数，等价于2n)和odd(奇数，等价于2n+1)两种。
【CSS】:nth-of-type 选择器为什么不起作用？
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-03 303
发现问题 今天工作才发现的，原来我一直就理解错了！！ MDN官网对这个选择器的的定义是： :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 元素 */ p:nth-of-type(4n) { color: lime; } 重点来了！！！他说明的是标签，针对的只是标签，因此，比如网上关于这...
关于nth-of-type、nth-child选择失败的问题
zerocean_的博客
03-14 2180
最近在做练习的时候发现，使用伪类选择器nth-of-type、nth-child时无法选到想要的元素，研究了一下发现是对这类伪类选择器的理解有点问题，下面先直接看代码 html代码 <style type="text/css"> div{ width: 50px; height: 50px; background-color: aqua; margin: 20px auto; } </style> <body> <div class="d
CSS选择器中 :nth-of-type()的常见问题（1）
jijioeoiq的博客
11-05 2258
关于：nth-of-type() 的问题 ：nth-of-type(n) 时css3新增的选择器； 同级层同类型的元素的第n个元素；可以传数字，2n,3n… <div class="listBox"> <h3></h3> <img src="img/02.png" alt=""> </div> <div c...
前端HTML中nth-child和nth-of-type的使用
个人笔记
02-21 628
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> li:nth-child(1){ background-color: red; } li:nth-child(2){ background-color: red; } /*不区分
详解CSS3中nth-child与nth-of-type的区别
12-13
CSS3中nth-child与nth-of-type的区别其实很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
09-25
css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助
Web前端学习笔记2（结构伪类选择器，:nth-of-type用法和区别，css3盒子模型，伪类选择器用法及应用）
m0_60531106的博客
06-29 898
1、用nth-child()选择偶数 2、选择奇数 3、选择所有数 4、n+m,和-n+m :nth-of-type用法 选第一个和最后一个元素 和nth-child()相似的用法 nth-child和nth-of-type的差别 （元素）:nth-child(m)先把所有元素排好，在找前面的元素（元素）:nth-of-type先找前面元素，再排序号 css3盒子模型 我们默认的盒子为盒子大小 = 本身大小+边框+padding盒子大小 = 本身大小
css中nth-child()与nth-of-type()区别
热门推荐
Aifangmy的博客
06-16 3万+
nth-child() dom.nth-child(n) 表示选中dom的父级元素中的第n个dom元素，若匹配，则选中，否则，不选中。 上面例子可以看出： p:nth-child(1) ：拿出p元素的父级元素div中的第一个子元素，对比是p元素，选中。 p:nth-child(2) ：拿出p元素的父级元素div中的第二个子元素，对比是p元素，不是p元素，是span，则不选中。 p:nth-child(3) ：拿出p元素的父级元素div中的第三个子元素，对比是p元素，选中。 span:nth-child
微信小程序nth-of-type()问题
weixin_46852620的博客
08-01 552
<view class="container"> <view class="title">0</view> <view class="test">1</view> <view class="test">2</view> <view class="test">3</view> <view class="test">4</view> </view> .con
nth-of-type和nth-child的正确使用方式，last-child为什么不生效？
仗剑天涯的专栏
10-28 1623
nth-of-type，nth-child 的正确使用方式，last-child为什么不生效？nth-of-type，nth-child的常用写法
CSS3伪类选择器:nth-child(n)及:nth-of-type(n)使用区别探究总结
MrZZhou的博客
01-30 1641
标签的情况 tag:nth-child(n)：很好理解。1.各层级中的第n个元素；2.且该元素是tag tag:nth-of-type(n)：和上面不一样。1.在各层级中第n个出现的tag元素，与它是在父级下的第几个位置无关。 类的情况 .class:nth-child(n)：和tag模式基本是一致的。1.各层级中的第n个元素；2.是class类 .class:nth-of-typ
CSS-盒子模型元素溢出
最新发布
Kevin7_35Durant的博客
05-08 189
使用了属性overflow之后，溢出的部分都被隐藏住了。正常情况下，网页是这个样子的，当文本超出了行高之后。作用：控制溢出的元素的内容的显示方式。属性：overflow。
:nth-child和:nth-of-type区别
10-13
:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于： - :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。 - :nth-of-type(n)选择器选取的是父元素下第n个与该元素类型相同的子元素。 举个例子，假设有如下HTML结构： ```html <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li> <li>列表项5</li> <li>列表项6</li> </ul> ``` 如果我们想选择第2个列表项，可以使用以下两种方式： ```css /* 使用:nth-child */ li:nth-child(2) { color: red; } /* 使用:nth-of-type */ li:nth-of-type(2) { color: blue; } ``` 在上面的例子中，使用:nth-child(2)会选择到第2个子元素，也就是列表项2，而使用:nth-of-type(2)会选择到第2个与该元素类型相同的子元素，也就是同样是列表项的第2个子元素，也就是列表项2。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoli_qidian

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值