zoukankan      html  css  js  c++  java
  • 带你彻底弄懂nth-of-type与nth-child的区别

     

    前言:nth-of-type与nth-child的区别,对于初学者来说是一个比较头疼的问题,也是一个初级前端常见的面试题,那么nth-of-type与nth-child有什么区别呢?下面带你彻底弄懂它们之间的区别。

    MDN上的概念:

    某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

    某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素,, 用 n 来筛选出在当前元素的兄弟元素节点的位置。

    我们可以注意到:nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素。

    我们可以举个例子,来弄懂他们之间的区别

    这是p:nth-child(4) ,他取到了p标签的第4个

    这是p:nth-of-type(4),他也取到了p标签的第4个

    但如果我们在 第二个与第三个之间加个h1呢,结果p:nth-of-type(4)取到了p元素的第四个,但是p:nth-child(4)取到的是p元素的第三个,这下我们就可以搞懂啦!

    因为nth-of-type他是当前元素的兄弟元素的第n个,而nth-child是当前元素的兄弟节点的第n个当前元素,所以p:nth-of-type(4)是第四个p元素,只能是p元素的第四个,即 当前元素:nth-of-type无论中间加入什么元素,都只能是当前元素的第n个,而p:nth-child(4)是取第四个兄弟节点的p元素,所以我们发现第三个p被p:nth-child(4)取到啦。当p:nth-child(4)的第四个兄弟节点不是p元素的话,会怎么样呢?

    我们可以看到,就取不到p:nth-child(4)了。

    总结:nth-of-type是取当前元素的兄弟元素的第n个,nth-child取的是当前元素的第n个节点的当前元素,现在你搞懂了吗?

  • 相关阅读:
    利用java自带的base64实现加密、解密
    CentOS 7下源码安装MySQL 5.7
    阿里巴巴Json工具-Fastjson讲解
    微信企业号开发—发送消息
    微信企业号开发-如何建立连接
    如何注册、使用微信企业号及安装第三方应用详解
    Jsp四个作用域page、request、session和application的区别
    根据两点经纬度计算距离
    Linux云服务器安装tomcat
    linux下svn服务器搭建步骤
  • 原文地址:https://www.cnblogs.com/onesea/p/13606971.html
Copyright © 2011-2022 走看看