css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
来源:互联网 发布:unity3d 平移代码 编辑:程序博客网 时间:2024/06/05 10:50
先看定义
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
看两者的差异就能大致明白了,nth-dhild在执行匹配的时候,不会注重特定的类型,而nth-of-type()则会匹配指定的类型,看下面的两个例子能解释一切
<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>对应的页面展示为
n
p:nth-child(2) 根据定义:选择器匹配属于其父元素的第 N 个子元素,不论元素的类型 则匹配的顺序是,第一个 <h1>这是标题</h1> 第二个:<p>第一个段落。</p> 所以第二个标红了
如果我们用p:nth-of-type,则不会去处理h1标签,只会关注特定类型p
<!DOCTYPE html><html><head><style> p:nth-of-type(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>
展示的效果如下图:
以上就是这两个的主要区别了
0 0
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- css:first-child、last-child、nth-child、 nth-last-child
- css nth-child(n)和nth-of-type(n)区别
- CSS3 :nth-child() ,nth-of-type(),nth-last-child() ,nth-last-of-type()
- nth-child(n)和nth-of-type(n)的区分
- nth-child和nth-of-type区别
- 浅谈:nth-child和:nth-of-type
- :nth-child和:nth-of-type
- CSS 关于nth-child和nth-of-type
- css :nth-child和:nth-of-type的区别
- css nth-child和nth-type-of 区别
- CSS选取第几个标签元素:nth-child(n)、first-child、last-child
- css选择器 nth-child(n)和nth-of-type(n)对比
- 巧用nth-last-child(n)
- 选择中的:nth-child(n)和:nth-of-type(n)的区别
- :nth-child(n)与:nth-of-type(n)的区别
- nth-type-of nth-child(n) eq(n)区别
- :nth-child(n)与:nth-of-type(n)的区别
- K邻近(KNN)分类和预测算法的原理及实现
- 复制给站在第一次人生十字路口的高考生
- C#Windows服务
- iOS UIWindow 窗口
- android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@428f7
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- Android Studio学习之安装插件
- MFC 添加关闭提示信息框
- iOS 转换坐标系
- 最全的常用正则表达式--包含校验数字、字符、一些特殊的需求等等
- 全局临时表
- Window Server 2012安装python 及pymssql模块
- 判断字符串是否没有重复字符
- JS冒泡和闭包案例分析