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):

  1. <style>  p:nth-child(2) { background:hotpink; } /*选中的是p的父元素的第二个元素*/ </style>
  2. <body>
  3. 　　<h1>这是标题</h1>
  4. 　　<p>第一个段落。</p>
  5. 　　<p>第二个段落。</p>
  6. 　　<p>第三个段落。</p>
  7. 　　<p>第四个段落。</p>
  8. </body>

p:nth-of-type(2):

  1. <style>  p:nth-of-type(2){background: hotpink;} /* 选中的是p的父元素的子元素中第二个p*/ </style>
  2. <body>
  3.     <h1>这是标题</h1>
  4.     <p>第一个段落。</p>
  5.     <p>第二个段落。</p>
  6.     <p>第三个段落。</p>
  7.     <p>第四个段落。</p>
  8.     <p>第五个段落。</p>
  9. </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. 梯度提升决策树(GBDT）

    1.提升树 以决策树为基函数的提升方法称为提升树.决策树可以分为分类树和回归树.提升树模型可以表示为决策树的加法模型. 针对不同的问题的提升术算法的主要区别就是损失函数的不同,对于回归问题我们选用平方 ...

  2. getMemory的经典例子

    //NO.1:程序首先申请一个char类型的指针str,并把str指向NULL(即str里存的是NULL的地址,*str为NULL中的值为0),调用函数的过程中做了如下动作:1申请一个char类型的指 ...

  3. Devexpress Ribbon 动态生成菜单

    /// <summary> /// 动态加载菜单 /// </summary> private void GetMenuBind() { //根据登录用户角色菜单动态创建 // ...

  4. FTP出现PORT模式成功, 请更新你的站点配置文件

    最近用FTP连接站点,经常出现连接不上或者连接失败,提示以PASV模式连接失败,正在使用PORT模式连接,最后才能连接成功,连接时间也是相当长,又慢又不稳定.   工具/原料   FlashFXP等F ...

  5. EF Oracle：错误 175

    错误 1 错误 175: 具有固定名称“Oracle.DataAccess.Client”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载.有关详细信息,请参阅内部异常. 安装 ...

  6. [Swift]LeetCode330. 按要求补齐数组 | Patching Array

    Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...

  7. [Swift]LeetCode1018. 可被 5 整除的二进制前缀 | Binary Prefix Divisible By 5

    Given an array A of 0s and 1s, consider N_i: the i-th subarray from A[0] to A[i] interpreted as a bi ...

  8. django启动server报错Error: That port is already in use.

    这种一般是端口错误,一般是要把端口关掉,这里提供了两种方法. 方法一:直接命令: sudo lsof -t -i tcp:8000 | xargs kill -9 方法二:脚本:名字manage.py ...

  9. RabbitQM使用笔记

    一:安装  and  卸载 curl -s https://packagecloud.io/install/repositories/rabbitmq/rabbitmq-server/script.r ...

  10. 【Spark篇】---Spark中Master-HA和historyServer的搭建和应用

    一.前述 本节讲述Spark Master的HA的搭建,为的是防止单点故障. Spark-UI 的使用介绍,可以更好的监控Spark应用程序的执行. 二.具体细节 1.Master HA 1.Mast ...