IT培训网更多 收回

IT培训
关注我们
官方公众号 回复"大礼包"享福利 领学习资料 分享IT知识
|

IT在线学习更多 收回

热门课程 更多 >
关注我们
扫码领资料 零基础学IT 微信扫码关注 回复“大礼包”享福利
| 初高中软件培训| 中公企商培训| 中公联合办学| 优校邦| 中公PMP| 中公软考| 计算机二级培训
实训项目库 登录 | 注册
400-650-7353
您所在的位置：首页 > IT干货资料 > web前端 > 【Web前端基础知识】:nth-child()和:nth-of-type()的区别

【Web前端基础知识】:nth-child()和:nth-of-type()的区别

  • 发布： Web前端培训
  • 来源：Web前端干货资料
  • 2020-09-11 14:59:08
  • 阅读()
  • 分享
  • 手机端入口

:nth-child和:nth-of-type都是css3的结构伪类选择器，和他们相关的还有一堆其他的结构伪类选择器，如果搞懂了这两个选择器的话，相应的也能搞懂和他们相关的其他结构伪类选择器啦。

这两个选择器，可不像我们看起来的那么简单，他们的作用相近，却又不完全一样。

定义

我们先来看下这两个选择器的定义：

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

写个例子看下：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>:nth-child()和:nth-of-type()的区别</title> 
  6.     <style> 
  7.         .box p:nth-child(2){ 
  8.             color:#fff; 
  9.             background: orange; 
  10.         } 
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div class="box"> 
  15.         <h2>我是h2标签</h2> 
  16.         <p>我是.box里的第二个子元素，我是第一个p标签</p> 
  17.         <p>我是.box里的第三个子元素，我是第二个p标签</p> 
  18.     </div> 
  19. </body> 
  20. </html> 

效果如下：

 

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>:nth-child()和:nth-of-type()的区别</title> 
  6.     <style> 
  7.         .box p:nth-of-type(2){ 
  8.             color:#fff; 
  9.             background: orange; 
  10.         } 
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div class="box"> 
  15.         <h2>我是h2标签</h2> 
  16.         <p>我是.box里的第二个子元素，我是第一个p标签</p> 
  17.         <p>我是.box里的第三个子元素，我是第二个p标签</p> 
  18.     </div> 
  19. </body> 
  20. </html> 

效果如下：

一个是.box p:nth-child(2)，一个是.box p:nth-of-type(2)，括号里面都2，但是效果却不同。那么到底这两个选择器是什么意思呢?

分析：

我们再来看下结构：

.box的子元素有三个，第一个是h2标签，第二个和第三个是p标签。

  1. <div class="box"> 
  2. <h2>我是h2标签</h2> 
  3.    <p>我是.box里的第二个子元素，我是第一个p标签</p> 
  4.    <p>我是.box里的第三个子元素，我是第二个p标签</p> 
  5. </div> 

.box p:nth-child(2)

.box p:nth-child(2)的效果是选择出了第一个p标签，也就是.box里的第二个子元素。

翻译下：

1.确定了选择的是.box元素里面的p元素。

2.选择的是.box的子元素里面àp元素à的父元素里面的à第二个子元素。

3.我们来分析下第二点到底是什么意思：”.box的子元素里面àp元素”指的是这两个元素：

4.“ p元素à的父元素”指的就是.box这个元素：

文章“【Web前端基础知识】:nth-child()和:nth-of-type()的区别”已帮助 人

>>本文地址：https://www.ujiuye.com/zhuanye/2020/55049.html

THE END  

声明:本站稿件版权均属中公教育优就业所有，未经许可不得擅自转载。

推荐阅读

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作？

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 
  • 大家都在看
  • 点击排行榜
1  软件测试需要学习什么技术？
2  大数据培训什么内容，培训完都 可以从事什么工作？
3 Web前端饱和了嘛？现在参加培训 还能找到工作吗？
4  Python培训完好找工作吗，现在 学习还来得及吗？
5 Unity培训完薪资待遇多少钱？
6  网络营销的前景怎么样?现在学习 还来得及吗?
7  优就业Linux培训课程体系是如何 构成的？
8 Web前端的前景怎么样？现在学习 来得及吗？
编程都有哪些种类？
计算机培训课程有什么？
软件开发是什么行业
UI设计工资一般多少?
it技术支持和运维有区别吗？
零基础学编程应该从哪入手？
电商培训课程有哪些？
IT行业发展好的十大城市有哪些？

快速通道fast track

近期开班时间TIME

上一篇 【Web前端基础知识】软换行使用详解

下一篇 【Web前端基础知识】JavaScript条件分支语句

优就业——中公教育旗下IT培训品牌

中公教育是大型的多品类职业教育机构，提供超过100个品类的综合职业就业培训服务。

优就业是中公教育IT培训品牌，致力于培养面向互联网领域的高端人才，以学员就业为目的，优质就业为宗旨，是一家集Java、Web前端、UI设计等十余类课程为一体的IT培训机构。

中公教育IT培训品牌 400-650-7353

Copyright©1999- 北京中公教育科技有限公司 .All Rights Reserved 京ICP备10218183号-88
京ICP证161188号 京公网安备11010802020723号 投诉建议：400-650-7353

在线咨询

扫码回复关键词“大礼包”
享学习福利

微信公众号
iPhone下载
Android下载