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. 关于&lt;button&gt; 没写 type=&#39;button&#39; 导致点击时提交以及&lt;button&gt;和&lt;input type=&quot;button&quot;&gt;的区别

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

  4. &lt;button&gt;和&lt;input type=&quot;button&quot;&gt; 的区别

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

  5. &lt;button&gt;与&lt;input type=&quot;button&quot;&gt; 的区别

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

  6. &lt;button&gt;与&lt;input type=&quot;button&quot;&gt;的区别

    一.定义和用法 <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. 解析&lt;button&gt;和&lt;input type=&quot;button&quot;&gt; 的区别

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

随机推荐

  1. java文件来演示如何访问MySQL数据库

    java文件来演示如何访问MySQL数据库. 注:在命令行或用一个SQL的前端软件创建Database. 先创建数据库: CREATE DATABASE SCUTCS; 接着,创建表: CREATE ...

  2. mysqlbinlog 查看日志时发生报错

    [root@cs Downloads]# mysqlbinlog mysql-bin. ERROR: Error , event_type: ERROR: Could not read entry a ...

  3. Windows10 如何删掉内置的 skype ?

    打开开始菜单,输入“PowerShell”并回车: 运行“Get-AppxPackage -User username”命令( username 请替换成当前实际用户名),此时会显示所有已安装的应用程 ...

  4. C++: int和string相互转换

    假设在一个C++的程序中常常会用到int和string之间的互换.个人建议能够写成一个函数,下次用的时候直接调用就可以. #include <iostream> #include < ...

  5. [Swift]LeetCode540. 有序数组中的单一元素 | Single Element in a Sorted Array

    Given a sorted array consisting of only integers where every element appears twice except for one el ...

  6. Docker操作笔记(三)数据管理

    数据管理 一.数据卷 数据卷 是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷 可以在容器之间共享和重用 对 数据卷 的修改会立马生效 对 数据卷 的更新,不会 ...

  7. POE 供电

    受电设备(PD)和供电设备(PSE) 标准的五类网线有四对双绞线但是在10M BASE-T和100M BASE-T中只用到其中的两对.IEEE80 2.3af允许两种用法: 1.应用空闲脚供电时4.5 ...

  8. Inside the Social Network’s (Datacenter) Network

    摘要: 大量服务提供商投资越来越多的更大数据中心来保证基础计算需求以支持他们的服务.因此,研究人员和行业从业者都集中了大量的努力设计网络结构有效互连和管理流量以保证这些数据中心的性能.不幸的是,数据中 ...

  9. UVA10026:Shoemaker&#39;s Problem(贪心)

    题目链接:  http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/K 题目需求:鞋匠有n个任务,第i个任务要花费ti ...

  10. 武汉Uber优步司机奖励政策(12月14日到12月20日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...