• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > CSS3中:nth-child和:nth-of-type的区别深入理解

CSS3中:nth-child和:nth-of-type的区别深入理解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css和css3的区别,css2和css3的区别,css3跟css有什么区别,css3和css5的区别,css和css3有什么区别等相关知识,佚名 希望在学习及工作中可以帮助到您
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。

:nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢?

其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。

这里附上一个小例子:

上面这个例子,.demo li:nth-child(2)选择的是<li>one</li>节点,而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。 </div>

您可能想查找下面的文章:

  • 详解CSS3中nth-child与nth-of-type的区别
  • css实例教程 一款纯css3实现的超炫动画背画特效
  • 基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
  • CSS3中:nth-child和:nth-of-type的区别深入理解
  • css 省略号 css3让多余的字符串消失并附加省略号的实现代码
  • 用CSS禁用输入法(CSS3 UI规范)实例解析
  • CSS教程:CSS3圆角属性

相关文章

  • 2017-06-02CSS3 media queries + jQuery实现响应式导航
  • 2017-06-02使用CSS3美化HTML表单的技巧演示
  • 2017-06-02css3实现针线缝合效果(图解步骤)
  • 2017-06-02CSS3中的常用选择器使用示例整理
  • 2017-06-02非常震撼的纯CSS3人物行走动画
  • 2017-06-02纯CSS绘制漂亮的圆形图案效果
  • 2017-06-02CSS3制作精致的照片墙特效
  • 2017-06-02非常漂亮的CSS3百叶窗焦点图动画
  • 2017-06-02纯CSS3实现的8种Loading动画效果
  • 2017-06-02纯CSS3制作的鼠标悬停时边框旋转

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
    • css3的transition效果和transfor效果示例介绍
    • 纯css3实现效果超级炫的checkbox复选框和radio单选框
    • CSS3让登陆面板3D旋转起来
    • 使用CSS3代码绘制可爱的Hello Kitty猫
    • CSS3实现时间轴效果
    • HTML5 CSS3给网站设计带来出色效果
    • CSS3 animation实现逐帧动画效果
    • 使用CSS3配合IE滤镜实现渐变和投影的效果
    • 网页切图的CSS和布局经验与要点

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有