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; }

结果:

时间: 2024-10-30 15:42:14

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

&lt;input type=&quot;image&quot;&gt; 和 &lt;img&gt; 用法区别

原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image" /> 定义图像形式的提交按钮. 必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用. <input type="image" src="submit.gif" alt=

%type、%rowtype 、record区别

1. 使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的first_name列的类型为VARCHAR2(20),我们可以按照下述方式声明一个变量: DECLARE v_FirstName VARCHAR2(20); 但是如果first_name列的定义改变了会发生什么(比如说表改变了,first_name现在的类型变为VARCHAR2(25))?那就会导致所有使用这个列的PL/SQL代码都必须进行修

判断数据类型instance of type of object.prototype.tostring 区别

typeof typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型. 返回的结果用该类型的字符串(全小写字母)形式表示,包括以下 6 种: number.boolean.string.object.undefined.symbal .function. typeof 对于对象,除了函数都会显示 object 对于 null 来说,虽然它是基本类型,但是会显示 object,这是一个存在很久了的 Bug instance of instanceof 是用来判断 A 是否为

&lt;input type="button"&gt;和&lt;button&gt;的区别

<input type="button">和<button>的区别:标题中的两个标签几乎在外观上没什么区别,在用法上甚至都一样,下面就来介绍一下这两个按钮之间的区别.区别一:与<input type="button">相比,<button>标签形式更为丰富,<button>与<tton>之间除了文本之外,还可以是图片或者多媒体内容,不过不能是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的

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

Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. int i = 10; Console.WriteLine(i.GetType());//区别Typeof()是运算符而GetType是方法GetType()是基类System.Object的方法,因此只有建立一个实例之后才能被调用(也就是创建实例)Typeof()的参数只能是lint,string,类,且不

LoadRunner基于HTML-based script和URL-based script方式录制的区别和各自的使用场景

一.区别: 为了更加直观的区别这两种录制方式,我们可以分别使用这两种方式录制同一场景(打开百度首页)然后进行对比,录制的代码如下: HTML-based script方式打开百度首页: Action() { web_url("www.baidu.com", "URL=http://www.baidu.com/", "Resource=0", "RecContentType=text/html", "Referer=&

通过update-mapping更新child的field失败——NullPointerException

使用Elasticsearch时,需要用到parent-child API,建立parent的mapping后,动态更新child的field字段时,出现常见的NEP--NullPointerException.log日志异常如下: [2016-04-01 12:04:53,986][INFO ][rest.suppressed          ] /test/_mapping/name/ Params: {index=test, type=name} java.lang.NullPointe

TypeScript: type alias 与 interface

官方文档中有关于两者对比的信息,隐藏在 TypeScript Handbook 中,见 Interfaces vs. Type Aliases 部分. 但因为这一部分很久没更新了,所以其中描述的内容不一定全对. 比如, 区别点之一:Type Alias 不会创建新的类型,体现在错误信息上. One difference is, that interfaces create a new name that is used everywhere. Type aliases don't create

python isinstance()函数和type()函数

一.type()用法 描述: python的 type 函数有两个用法,当只有一个参数的时候,返回对象的类型.当有三个参数的时候返回一个类对象. 语法: 一个参数:type(object) 三个参数:type(name,bases,dict) 用法: 一个参数时,type()返回一个对象的数据类型 1 >>> type(1) 2 <class 'int'> 3 >>> type('alex') 4 <class 'str'> 5 >>

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20