• 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学习资料

    测一测
    你适合学哪门IT技术?

    1 您的年龄

    2 您的学历

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

    获取测试结果
     
    课程资料、活动优惠 领取通道
     
     
    韩国毛茸茸的丰满妇女,亚洲国内自拍愉拍,高清性色生活片97,亚洲日本成本人观看 网站地图