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

typescirpt css样式 css nth-type
   在CSS里选择父元素下的第几个子元素我们可以用的方法有nth-child 和nth-of-type，刚开始用的时候觉得这两个应该效果的用法应该是一样的，但是为什么CSS会定义两个一样的选择器呢？今天我来讲讲自己的见解，不喜勿喷；  现在来谈谈他们之间的差别：代码结构如下（1）： <section> <p>第1个</p&gt
typescirpt css样式
前端
ViewUI
选择器
代码结构
转载
mob64ca14061c9e
2024-04-02 09:35:06
34阅读

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评论

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阅读

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阅读

零基础学习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阅读

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

:nth-last-of-type (Selectors) – CSS 中文开发手册
[CSS 中文开发手册:nth-last-of-type (Selectors) - CSS 中文开发手册该:nth-last-of-type(an+b)CSS伪类匹配的是在它之后有an+b-1个同类型同胞元素的元素，其中n的是正数或零。它本质上与:nth-of-type是一样的，除了它从后向前计数项目，而不是从前往后。/* Selects every fourth inside a par...
<div class=
转载
mb5fd86dae5fbf6
2020-07-06 00:13:00
134阅读

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阅读

详解：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阅读

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

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评论

深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(
html
背景色
css3
算术表达式
选择器
转载
mb5fdb12e4adbb2
2016-12-29 13:14:00
69阅读

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-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。 示例代码： 总结： 除了first-child选择器兼容IE7+以上外，其他选择器均需要IE9以上浏览器才能兼容。
CSS
nth-child
first-child
last-child
nth-of-type
转载
mb5fe94c9f04536
2017-07-14 17:02:00
120阅读
2评论

: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阅读

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安全认证
相关文章

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

彻底理解nth-child和nth-of-type的区别

彻底理解nth-child和nth-of-type的区别。

带你彻底弄懂nth-of-type与nth-child的区别

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

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

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

0057 结构伪类选择器 -- :nth-child(n) 、 :nth-of-type(n)

css定位：p:nth-child(n)

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

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