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这个元素:

课程好礼申请领取
您的姓名
您的电话
意向课程
 

中公优就业

官方QQ

扫描上方二维码或点击一键加群,免费领取价值599元网课,加群暗号:599。 一键加群

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,领80G学习资料
QQ交流群
领取免费网课
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
领取80G学习资料

淘宝商家短视频
预约试听
2020OAO训练营
免费试听
课程资料、活动优惠 领取通道