1.官方解释：

　　p:nth-child(2)     选择属于其父元素的第二个子元素的每个 <p> 元素。
　　p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

2.大白话

　　p:nth-child(2)　　选择p同级元素中的（从前到后的）第二个元素

　　p:nth-of-type(2) 　选择p同级元素中的第二个p元素

第一个是不管谁都得算上，第二个只管看p元素

简单的实例了解一下

p:nth-child(2):

<style>  p:nth-child(2) { background:hotpink; } /*选中的是p的父元素的第二个元素*/ </style>

<body>

　　<h1>这是标题</h1>

　　<p>第一个段落。</p>

　　<p>第二个段落。</p>

　　<p>第三个段落。</p>

　　<p>第四个段落。</p>

</body>

p:nth-of-type(2):

<style>  p:nth-of-type(2){background: hotpink;} /* 选中的是p的父元素的子元素中第二个p*/ </style>

<body>

    <h1>这是标题</h1>

    <p>第一个段落。</p>

    <p>第二个段落。</p>

    <p>第三个段落。</p>

    <p>第四个段落。</p>

    <p>第五个段落。</p>

</body>

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

  1. button与input[type=”button”]的区别

    button与input[type="button"]的区别 特别感谢 @守护晴天 ,指出了博客中不细致不严谨的地方,也让我学到了更多,更多是觉得抱歉,由于自己的不细致可能误导了一 ...

  2. C#中的值类型（value type）与引用类型（reference type）的区别

    ylbtech- .NET-Basic:C#中的值类型与引用类型的区别 C#中的值类型(value type)与引用类型(reference type)的区别 1.A,相关概念返回顶部     C#中 ...

  3. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  4. <button>和<input type="button"> 的区别

    <button>标签 定义和用法 <button> 标签定义一个按钮. 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮 ...

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

    <button> button按钮点击会刷新整个页面 <input type="button">  不会刷新整个页面 本文为本人用来记录自己做的一些东西,如 ...

  6. <button>与<input type="button">的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  7. type() 和 isinstance()区别

    a=111 # type() 返回数据类型 In: type(a)  Out: int In: print(type(a)) Out: <class 'int'> # isinstance ...

  8. find、which、whereis、locate和type之间的区别

    1.find find是最常用和最强大的查找命令.它能做到实时查找,精确查找,但速度慢. find的使用格式如下: #find [指定目录] [指定条件] [指定动作] 指定目录:是指所要搜索的目录和 ...

  9. jquery中选择器input:hidden和input[type=hidden]的区别

    关于选择器:hidden的说明,在jquery说明文档中是这样说的:匹配所有不可见元素,或者type为hidden的元素.而[type=hidden]是查找所有type属性等于hidden的元素.两者 ...

  10. 解析<button>和<input type="button"> 的区别

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

随机推荐

  1. linux操作命令之搜索命令

    1.文件搜索命令:locate 文件名 在后台数据库中按照文件名搜索,搜素速度更快 /var/lib/mlocate:#locate命令所搜索的后台数据库 updatedb:更新数据库 updated ...

  2. node-basis(提供nodejs开发的基础包)

    地址: https://github.com/flybirdsoft/use-node-basis

  3. SSIS - 9.文件系统任务

    文件系统任务是用来操作服务器上的文件和目录的.比如,可以新建任务来创建.复制.删除或移动一个文件或一个目录. 一.操作和属性 一个文件系统可以定义如下10种操作. 所有的操作包含Name, Descr ...

  4. ubuntu 16.04卸载不必要默认安装软件

    两个办法,一个在ubuntu软件里一个一个删,明显的windows下做法. 还有一个通过终端来删除.ctrl+alt+t打开终端. 1.卸载libreoffices(要删一起删了,然后去装office ...

  5. Kotlin基础

    1.函数也是对象,可以作为参数和返回值 2.使用驼峰命名,尽量避免下划线 3.public函数应当有说明文档 4.lambda中花括号内前后都应该有空格 5.空值安全检查  var s: String ...

  6. Java并发编程基础之volatile

    首先简单介绍一下volatile的应用,volatile作为Java多线程中轻量级的同步措施,保证了多线程环境中“共享变量”的可见性.这里的可见性简单而言可以理解为当一个线程修改了一个共享变量的时候, ...

  7. JVM性能调优监控命令jps、jinfo、jstat、jmap+jhat、jstack使用详解

    JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外,还有jps.jinfo.jstat.jmap+jhat.jstack等小巧的工具,本博客希望能起抛砖 ...

  8. 大数据与云计算的关系是什么，Hadoop又如何参与其中？Nosql在什么位置，与BI又有什么关系？

    大数据与云计算的关系是什么,Hadoop又如何参与其中,Nosql在什么位置,与BI又有什么关系?以下这篇文字讲他们的关系讲的非常清楚.  在谈大数据的时候,首先谈到的就是大数据的4V特性,即类型复杂 ...

  9. [Swift]LeetCode209. 长度最小的子数组 | Minimum Size Subarray Sum

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  10. setData方法修改data中对象或数组的属性值(小程序开发）

    今日在开发小程序地图的过程中,遇到一个问题,困扰了我一会 业务如下: 困扰点: 我不知道如何修改data中数组包含的对象是如何修改的:期初的想法还是想共享上面的数据,想的太简单了 正确的解决步骤: 直 ...