CSS3中nth-child与nth-of-type的区别详解

css3nth-childnth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of-type?因为它是以”type”来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,  而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。

文字未免听起来比较晦涩,便于理解,这里附上一个小例子:

立即学习“前端免费学习笔记(深入)”;

nbsp;html>demo.demo li:nth-child(2){color: #ff0000;}.demo li:nth-of-type(2){color: #00ff00;}

zero

  • one
  • two
  • 登录后复制

    以上就是CSS3中nth-child与nth-of-type的区别详解的详细内容,更多请关注【创想鸟】其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

    发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2901337.html

    (0)
    上一篇 2025年3月11日 00:09:39
    下一篇 2025年2月17日 22:50:14

    AD推荐 黄金广告位招租... 更多推荐

    相关推荐

    • CSS3代替JS实现交互的方法

      本文主要介绍了使用css3来代替js实现交互,从css3的动画和js动画对比角度来看两者,会更清晰;而且随着前端框架的使用,页面动画会越来越多的应用css3。具体示例代码大家参考下本文吧,希望能帮助到大家。 【CSS3和JS】 对于CSS了…

      2025年3月11日
      200
    • 实例详解CSS3 实现弹幕

      项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。本文主要介绍…

      编程技术 2025年3月11日
      200
    • css3实现圆形进度条的方法

      在开发微信小程序的时候,遇到圆形进度条的需求。本文主要介绍了使用 css3 实现圆形进度条的示例,这里整理了详细的代码,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。 使用canvas绘图比较麻烦: 1、为了实现在不同屏幕上面的…

      2025年3月11日
      200
    • 详解CSS3实现无限循环的无缝滚动

      有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)?本文主要介绍了用css3实现无限循环的无缝滚动的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一…

      2025年3月11日
      200
    • css3设置没有上下边的列表间隔线方法实例

      本文主要给大家介绍了利用css3如何设置没有上下边的列表间隔线,文中分享了两种解决方法,分别是利用通用兄弟选择器( ~ )和伪类选择器( :first-of-type / :last-of-type )来实现的,给出了详细的示例代码供大家参…

      2025年3月11日
      200
    • css3画同心圆示例代码

      本文主要给大家介绍了利用css3如何画个同心圆的相关资料,文中给出了详细的css3示例代码,并对代码进行了详细的解析方法大家理解和学习css3画同心圆,对大家具有一定的参考学习价值,希望能帮助到大家。 基本思路 首先你得画三个圆吧,那三个圆…

      2025年3月11日
      200
    • 详解CSS3的filter滤镜属性

      最近发现了一个非常强大的css3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果。本文主要介绍了详解c…

      2025年3月11日 编程技术
      200
    • 详解CSS3中linear-gradient和radial-gradient

      本文主要介绍了关于css中渐变的相关资料,主要分享css3中linear-gradient和radial-gradient的知识,带给大家使用渐变的另一个角度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下,希望能帮助到大家。 一、线…

      2025年3月11日 编程技术
      200
    • 实例详解HTML5、CSS3实现3D转换效果

      在css二维的世界里,我们可以对元素设置宽高、位置、旋转、背景等等。在css三维世界里,扩展出了一个z轴,这个z轴垂直于屏幕并指向外面。下面这篇文章主要给大家介绍了利用html5+css3实现3d转换效果的相关资料,需要的朋友可以参考,希望…

      2025年3月11日 编程技术
      200
    • 详解css3和伪元素实现鼠标移入时下划线向两边展开

      本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧。希望能帮助到大。 先来看看效果图: 实现思路…

      2025年3月11日
      200

    发表回复

    登录后才能评论