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 ...
随机推荐
- Memcached常用命令及使用说明(转)
一.存储命令 存储命令的格式: 1 2 <command name> <key> <flags> <exptime> <bytes> < ...
- JAVA继承时this和super关键字
JAVA继承时this和super关键字 本文主要讨论在方法前使用this或super关键字时,编译器在什么地方查找对应的函数. 在子类中指定this关键字.首先在本类中查找,如果本类中找不到,再在父 ...
- Windows下Nginx的启动、停止等命令(转)
Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...
- Ext 4.2以后版本 ComboBox 联动
//combox树 ComboTree: function (upDep, empStore) { var com = Ext.create('Ext.ux.desktop.ComboTree', { ...
- (转)WebApi自动生成在线文档Swashbuckle
原文地址:http://www.cnblogs.com/Arrays/p/5146194.html?utm_source=tuicool&utm_medium=referral 1.前言 1. ...
- python3 pickle, json
pickle 有dump ,dumps ,load,loads等方法.区别在于dumps不会写入到文件. import pickle string = ['a', 2341, 'adsf'] p_st ...
- unix环境C编程之日期时间转换
1.理清概念 1.1.日历时间: 含义:国际标准时间1970年1月1日00:00:00以来经过的秒数. 数据类型:time_t.实际上是long的别名. 1.2.tm结构时间: 含义:结构 ...
- Hive基础之COALESCE用法
语法: COALESCE(T v1, T v2, …) 返回参数中的第一个非空值:如果所有值都为NULL,那么返回NULL 以emp表为例: desc emp; empno int None enam ...
- 中南大学第一届长沙地区程序设计邀请赛 To Add Which?
1350: To Add Which? Time Limit: 1 Sec Memory Limit: 128 MB Description There is an integer sequence ...
- VS2010 MSDN配置
安装VS2010之后总是要装MSDN的,不然写起程序来还真不方便.前段时间换了电脑后,折腾了好久才把VS和MSDN装好,所以为了方便自己和别人特地把配置MSDN的详细步骤写出来: 1. ...