看CSS3时发现了一个nth-of-type选择器,发现平时基本没见过用,就研究了一下,w3c是这样说明的:

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

看起来和nth-child很像

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

那么两者区别到底是什么?试验一下吧。

HTML:

        <div class="box">
box:
<p>我是p1</p>
<p>我是p2</p>
</div>
<div class="pox">
pox:
<p>我是p1</p>
<p>我是p2</p>
</div>

CSS:

        <style>
.box{
margin: 100px;
float: left;
}
.pox{
margin: 100px 0 0 60px;
float: left;
}
.pox p:nth-child(1){
color: red;
}
.box p:nth-of-type(1){
color: red;
}
</style>

结果貌似相同:

这里稍微做一下改变HTML:

         <div class="box">
box:
<div>我是div1</div>
<p>我是p1</p>
<div>我是div2</div>
<p>我是p2</p>
</div>
<div class="pox">
pox:
<div>我是div</div>
<p>我是p1</p>
<div>我是div2</div>
<p>我是p2</p>
</div>

结果:

这里发现nth-child没有起作用,这是为什么呢?

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

这里的pox下的第一个子元素是div而不是p,所以选择失败。若想p1变红,p1是pox下的第二个子元素应该选择nth-child(2),应该改为:

.pox p:nth-child(2){ color: red; }

结果:

nth-of-type和nth-child的区别的更多相关文章

  1. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  2. <input type="image"> 和 <img> 用法区别

    原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image ...

  3. <input type="text">和<textarea>的区别

    在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢?  一:<i ...

  4. go type别名和定义类型区别

    package main import ( "fmt" ) type person struct { age int name string } func (p person)te ...

  5. input[type="button"]与<button>的区别

    <button>标签  浏览器支持  所有主流浏览器都支持<button>标签.  重要事项:如果在HTML表单中使用button元素,不同的浏览器会提交不同的值.IE将提交& ...

  6. qtp type和set方法的区别

    type模拟键盘输入,是一个字符一个字符的输入. set是整个输入框一起置值. 例如:winedit中输入a后,再用type输入b,结果就是ab 如果用set输入a后,再用set输入b,结果就是b. ...

  7. type='button'和'submit'的区别

    今天在对表单的项目进行删除时出现了问题,原因就出现在点击input按钮时,这个input属性是type='button'还是type='submit'. 代码大致如下: <script type ...

  8. instance of type of object.prototype.tostring 区别

    typeof typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.   返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 6 种:   number.boolea ...

  9. isinstance 和 type 的区别

    class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isins ...

  10. c# 之 System.Type.GetType()与Object.GetType()与typeof比较

    Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. ; Con ...

随机推荐

  1. [Java] 读写字符串数据

    package test.stream; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  2. 防止重复发送 Ajax 请求

    作者:长天之云链接:http://www.zhihu.com/question/19805411/answer/15465427来源:知乎 不推荐用外部变量锁定或修改按钮状态的方式,因为那样比较难: ...

  3. C++primer 练习12.6

    编写函数,返回一个动态分配的int的vector.将此vector传递给另一个函数,这个函数读取标准输入,将读入的值 保存在vector元素中.再将vector传递给另一个函数,打印读入的值.记得在恰 ...

  4. Find the Clones(字典树)

    链接:http://poj.org/problem?id=2945 Description Doubleville, a small town in Texas, was attacked by th ...

  5. 一个简单的AJAX实例

    创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...

  6. 移动开发 android 入门开发 阶段视频

    一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...

  7. 【Unity Shaders】学习笔记——SurfaceShader(五)让纹理动起来

    [Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...

  8. U盘无法拷贝超过4G的大文件

    现在U盘的容量越来越大了,8G闪存满天飞,几乎已成“标配”,市面上再见难觅64M.128M等U盘的踪迹,可是细心的你也许已经发现,即使是8G或更大体积的U盘,仍然不能拷贝存储体积超过4G的大文件,这是 ...

  9. phonegap/cordova 升级版本

    调用语句 : windows用户 npm update -g cordova 如果是 mac系统的用户  使用: 查看cordova信息 npm info cordova 查看cordova 版本 查 ...

  10. devexpress中ASPxGridView控件初始化赋值

    写在ASPxGridView中OnCellEditorInitialize="ASPxGridView_progoods_CellEditorInitialize"  事件中: / ...