51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
信创认证
公众号矩阵
移动端
视频课 免费课 排行榜 短视频 直播课 软考学堂
全部课程 软考 信创认证 华为认证 厂商认证 IT技术 PMP项目管理 免费题库
在线学习
文章 资源 问答 课堂 专栏 直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
CKA（Kubernetes 管理员认证）精品班
按照企业k8s需求进行技能培训，帮助用户快速拿下CKA认证，K8S采用新版本进行授课，课程内容全、讲解详细 。 免费试学
软考高级：系统架构设计师精品班
根据考试大纲对知识点、高频考点进行深入讲解，传授答题技巧及判断标准，助力高效备考。 免费试学
信创认证：系统架构师精品班（高级）
信息技术应用创新人才考试评价 免费试学

E:nth-of-type(n)
E:nth-of-type(n) 语法： E:nth-of-type(n) { sRules } 说明： 匹配同类型中的第n个同级兄弟元素E。深圳dd马达 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body 该选择符总是能命中
html
示例代码
选择符
转载
mob6047570116b7
2019-12-16 17:27:00
93阅读
2评论

nth-of-type
<view class="upload_lists"> <view class="upload_btn"> <view class="camera"></view> <view class="upload_words">点击上传</view> </view> <view class="upload_
上传
其他
转载
mob604756f47778
2019-07-16 17:12:00
68阅读
2评论

nth-of-type
.menu-item:nth-of-type(2) .menu-img width 90px height 90px.menu-item:nth-of-type(3) .menu-img width 78px height 90px.menu-item:nth-of-type(4) .menu-img width 90px height 90px.menu-item:nt...
选择器
原创
精精精精
2023-01-11 17:54:23
24阅读

nth-child()、nth-of-type
下午工作恰巧因为业务需求一股脑用到了这css几个选择器就详细的写一下。首先这
伪类选择器
选择器
css
html
原创
wx6375cd1abf2fb
2022-11-18 00:10:40
120阅读

CSS :nth-of-type() bug
CSS :nth-of-type() bug
nth-of-type
CSS
bug
css
转载
mb5fe55c05ccc1d
2020-12-29 10:45:00
220阅读
2评论

css nth-of-type All In One
css nth-of-type All In One
CSS
CSS3
nth-of-type
css
转载
mb5fe18e5a55d8d
2021-07-14 16:43:00
142阅读
2评论

0057 结构伪类选择器 -- :nth-child(n) 、 :nth-of-type(n)
如果页面中有两个这样的div结构，则两个第一个<span>我是span</span>，都是pink <div> <p>我是一个p标签</p> <span>我是span</span> <br> <span>我是span</span> <br> <span>我是span</span> <br> </di
html
参数详解
属性列表
学习
转载
mob604756ebc436
2019-12-31 19:48:00
254阅读
2评论

详解css3中的:nth-of-type(n)
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，
css3
:nth-of-type(n)
选择器
css
HTML
原创
wx63fc582aa165f
2023-03-01 09:33:16
465阅读

零基础学习CSS(9)——:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type、:target、:lang、:not
官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文:nth-child(n)：https://man.ilovefishc.com/pageCSS3/dotnth-child-n.html:nth-last-child(n)：https://man.ilovefishc.com/pageCSS
web开发
前端开发
Html
CSS
原创
Dragon水魅
2021-06-03 17:28:21
205阅读

:nth-child和:nth-of-type之间的差异
对于 :nth-child ：先看下面的一段代码：<style>  p:nth-child(1){ border: 1px solid; } </style> <div class="c1"> <div class="c11"> <p class="pp">1&l
nth-child、nth-of-typ
原创
wg_whhFaGEB
2015-06-18 20:24:04
1151阅读

详解：nth-last-of-type(2) nth-of-type(2) nth-child(2) 6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box1 p:nth-child(2) ...
html
css
原创
陈业贵的博客
2021-11-16 17:00:28
357阅读

彻底理解nth-child和nth-of-type的区别。
最近又有些天没写博客了，主要写一篇下来，太浪费时间了，其实这不是根本，根本是最近比较忙，忙什么呢？最近发现一个问题觉得学习速度太慢了
nth-child
nth-of-type
选择器
原创
wx57c6b1aea90cf
2021-08-04 11:11:19
275阅读

彻底理解nth-child和nth-of-type的区别
主要是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样，于是打算写下来。nth-childnth-child倒很好理解,就是选择第几个.<style>   p:nth-child(2),p:nth-child(7){color:red;   }</style><h1>标题</h1><p>这是锻若&lt
nth-child
nth-of-type
转载
mb6013c0cc735b5
2021-01-31 20:25:24
375阅读
2评论

CSS3 :nth-of-type() 选择器
可以设定第几个元素的样式 案例 css html 效果
二维码
html
css
分享
原创
TBHacker
2021-08-05 16:21:39
188阅读

带你彻底弄懂nth-of-type与nth-child的区别
前言：nth-of-type与nth-child的区别，对于初学者来说是一个比较头疼的问题，也是一个初级前
css
元素节点
原创
草长莺飞飞满天
2022-06-20 11:17:11
96阅读

css3中 nth-child 和 nth-of-type 的区别
nth-child 和 nth-of-type的下标都是从1开始的nth-child 和 nth-of-type有什么不同？直接上例子，看代码注释就好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</ti...
css3
elementui
sass
html
代码注释
原创
wx6409a261df68a
2023-03-15 00:06:58
66阅读

CSS3选择器:nth-child与:nth-of-type区别
一、:nth-child1.1 说明:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。注意：如果第N个子元素与选择的元素类型不同则样式无效！1.2 示例<style> div>p:nth-child(2){     color:red; } </style> <di
HTML
CSS
CSS3
原创
除除zz
2017-06-24 19:17:37
1460阅读

CSS选择器之:nth-child()和:nth-of-type()的使用
今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。一、:nth-child()和:nth-of-type()的支持度所有主流浏览器均支持:nth-child()和:nth-of-type()选择器，除了IE8及更早的版本。二、:nth-child()和:nth-of-type()的一般使用方法1、:nth-child(x);选择第x的元素2、:nth-child
css
原创
Gendan5
2019-09-06 16:06:56
687阅读

CSS3选择器:nth-child和:nth-of-type之间的差异
转自：http://www.zhangxinxu.com/wordpress/201
CSS3
:nth-child
:nth-of-type
好用
css3
转载
mob604756fc5b03
2018-12-14 22:51:00
113阅读
2评论

css :nth-of-type选择器为什么不起作用！！！
发现问题 今天工作才发现的，原来我一直就理解错了！！ MDN官网对这个选择器的的定义是： :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 元素 */ p:nth-of-type(4n) { co ...
css
选择器
html
类名
参考文献
转载
mob60475700baf7
2021-08-03 10:35:00
570阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5
精品课程领资料
免费资料>
2025软考
系统架构设计师 系统规划与管理师 软件设计师 系统集成项目管理工程师
信创认证
系统架构师 信创集成项目管理师 信创规划管理师 系统开发工程师
厂商认证
CKA/CKS架构师 红帽认证工程师 Oracle-OCP认证 Oracle-OCM认证
IT技术
数据库高级工程师 AIGC大模型实战 Linux云计算架构师 Python全栈开发
华为认证
数通HCIP认证 云计算HCIE认证 华为存储HCIE认证 HCIP安全认证
相关文章

深入理解css3中nth-child和 nth-of-type的区别

CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用

【响应式Web前端设计】CSS3 :nth-of-type() 选择器

css 属性选择器 伪类选择器 nth-child属性 nth-of-type属性

CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

深入理解E:nth-type-of(n)和E：nth-child(n)的区别

Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type

:nth-child(n)

Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

关于我们
官方博客 全部文章 热门标签 班级博客
了解我们 网站地图 意见反馈
友情链接
鸿蒙开发者社区 51CTO学堂
51CTO 软考资讯