nth-of-type和nth-child的区别
看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的区别的更多相关文章
- 网站开发进阶(四十四)input type="submit" 和"button"的区别
网站开发进阶(四十四)input type="submit" 和"button"的区别 在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...
- <input type="image"> 和 <img> 用法区别
原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image ...
- <input type="text">和<textarea>的区别
在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢? 一:<i ...
- go type别名和定义类型区别
package main import ( "fmt" ) type person struct { age int name string } func (p person)te ...
- input[type="button"]与<button>的区别
<button>标签 浏览器支持 所有主流浏览器都支持<button>标签. 重要事项:如果在HTML表单中使用button元素,不同的浏览器会提交不同的值.IE将提交& ...
- qtp type和set方法的区别
type模拟键盘输入,是一个字符一个字符的输入. set是整个输入框一起置值. 例如:winedit中输入a后,再用type输入b,结果就是ab 如果用set输入a后,再用set输入b,结果就是b. ...
- type='button'和'submit'的区别
今天在对表单的项目进行删除时出现了问题,原因就出现在点击input按钮时,这个input属性是type='button'还是type='submit'. 代码大致如下: <script type ...
- instance of type of object.prototype.tostring 区别
typeof typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型. 返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 6 种: number.boolea ...
- isinstance 和 type 的区别
class A: pass class B(A): pass isinstance(A(), A) # returns True type(A()) == A # returns True isins ...
- c# 之 System.Type.GetType()与Object.GetType()与typeof比较
Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. ; Con ...
随机推荐
- [Java] 读写字符串数据
package test.stream; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...
- 防止重复发送 Ajax 请求
作者:长天之云链接:http://www.zhihu.com/question/19805411/answer/15465427来源:知乎 不推荐用外部变量锁定或修改按钮状态的方式,因为那样比较难: ...
- C++primer 练习12.6
编写函数,返回一个动态分配的int的vector.将此vector传递给另一个函数,这个函数读取标准输入,将读入的值 保存在vector元素中.再将vector传递给另一个函数,打印读入的值.记得在恰 ...
- Find the Clones(字典树)
链接:http://poj.org/problem?id=2945 Description Doubleville, a small town in Texas, was attacked by th ...
- 一个简单的AJAX实例
创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...
- 移动开发 android 入门开发 阶段视频
一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...
- 【Unity Shaders】学习笔记——SurfaceShader(五)让纹理动起来
[Unity Shaders]学习笔记——SurfaceShader(五)让纹理动起来 转载请注明出处:http://www.cnblogs.com/-867259206/p/5611222.html ...
- U盘无法拷贝超过4G的大文件
现在U盘的容量越来越大了,8G闪存满天飞,几乎已成“标配”,市面上再见难觅64M.128M等U盘的踪迹,可是细心的你也许已经发现,即使是8G或更大体积的U盘,仍然不能拷贝存储体积超过4G的大文件,这是 ...
- phonegap/cordova 升级版本
调用语句 : windows用户 npm update -g cordova 如果是 mac系统的用户 使用: 查看cordova信息 npm info cordova 查看cordova 版本 查 ...
- devexpress中ASPxGridView控件初始化赋值
写在ASPxGridView中OnCellEditorInitialize="ASPxGridView_progoods_CellEditorInitialize" 事件中: / ...