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. Mesos源码分析(5): Mesos Master的启动之四

      5. Create an instance of allocator.   代码如下   Mesos源码中默认的Allocator,即HierarchicalDRFAllocator的位置在$ME ...

  2. 非对称加密技术中，iFace [ 爱妃链 ]人脸密钥技术排名第三，将弥补区块链现有不足

    最近,区块链领域,出现了一个比较热门技术的讨论,人脸密钥技术,可能大家还对这个名词感到很陌生,但是熟悉加密技术的技术大牛可能一听就能够明白大体的意思了,但是也正是这一熟悉而陌生的技术名词,掀起了区块链 ...

  3. Markdown语法及html内嵌

    目录 1.Markdown介绍 2.Markdown语法介绍 3.内嵌html语法   之前看到很多大佬博客写的特别漂亮,非常羡慕,他们是怎么排版的呢?作为一个小白,学习使我快乐....终于在不断摸索 ...

  4. pycharm（Python编辑器）的激活

    1.将“0.0.0.0 account.jetbrains.com”中的内容添加到hosts文件中,hosts路径为:C:\Windows\System32\drivers\etc mac用户的hos ...

  5. Jason Wang: 结对编程 CountWord(第三次作业)

    本次作业地址: https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/2882 学号: 201731072323 ...

  6. scala中spark运行内存不足

    用 bash spark-submit 在spark上跑代码的时候出现错误: ERROR executor.Executor: Exception in task 9.0 in stage 416.0 ...

  7. Echarts图标自适应问题(已解决)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. redis 系列27 Cluster高可用 (2)

    一. ASK错误 集群上篇最后讲到,对于重新分片由redis-trib负责执行,关于该工具以后再介绍.在进行重新分片期间,源节点向目标节点迁移一个槽的过程中,可以会出现该槽中的一部分键值对保存在源节点 ...

  9. RS232串口的Windows编程纪要

    再次是一篇入门文,各路神仙退散. 直接进入主题,又不是历史课,关于RS232那些前世今生的故事就不摆了. 硬件链接 首先以9针小口为例(大口应当只能去博物馆看了吧)看一下管脚排布,其实RS232本身没 ...

  10. 如何在SpringBoot中集成JWT(JSON Web Token)鉴权

    这篇博客主要是简单介绍了一下什么是JWT,以及如何在Spring Boot项目中使用JWT(JSON Web Token). 1.关于JWT 1.1 什么是JWT 老生常谈的开头,我们要用这样一种工具 ...