查了下w3和MDN的手册，没发现有这个说明，写篇随笔记下。

1、.class:nth-of-type(n)在选择class的时候，如果在class前面插入x个同类型标签，n需要加上x

<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<head>

<style>

    * {padding: .5em;}

    .para:nth-of-type(1) {background-color: red;}

</style>

</head>

<body>

    <p class="para">我是第1个p.para标签</p>

    <p class="para">我是第2个p.para标签</p>

</body>

</html>

当在第1个p.para前面插入一个p时:

    <p>我是一个普通的p标签</p>

    <p class="para">我是第1个p.para标签</p>

    <p class="para">我是第2个p.para标签</p>

此时.para:nth-of-type(2)才会是第一个p.para样式生效，jQuery选择器同理：

2、如果多个标签具有相同class，.class:nth-of-type(n)选择class的时候会全部选中所有标签的第n个class元素，jQuery只选择第一个标签的第n个class元素

    <div class="para">我是第1个div.para标签</div>

    <div class="para">我是第2个div.para标签</div>

    <div>我是一个普通的div标签</div>

    <section class="para">我是第1个section.para标签</section>

    <section class="para">我是第2个section.para标签</section>

    <section>我是一个普通的section标签</section>

    <p class="para">我是第1个p.para标签</p>

    <p class="para">我是第2个p.para标签</p>

    <p>我是一个普通的p标签</p>

建议添加样式时使用tag:nth-of-type(n)或者tag.class:nth-of-type(n)筛选元素

nth-of-type在选择class的时候需要注意的一个小问题的更多相关文章

  1. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  2. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  3. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  4. 类似智能购票的demo--进入页面后默认焦点在第一个输入框，输入内容、回车、right时焦点自动跳到下一个，当跳到select时，下拉选项自动弹出，并且可以按上下键选择，选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  5. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. type="file" 选择图片后预览

    function setImagePreview(avalue) { var docObj = document.getElementById("doc"); var imgObj ...

  7. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  8. CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法

    2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...

  9. bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示

    Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...

随机推荐

  1. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  2. 别语言之争了，最牛逼的语言不是.NET，也不是JAVA!

    谁都不用说,博客园明显的偏.NET,C#的讨论一出现,推荐讨论热火朝天,而发点JAVA的东西,应者寥寥.一旦有出现两大派系的竞争,那绝对是头条.每天都看,早就麻木了. 研二的我浸淫.NET已经三四年, ...

  3. 基于NodeJS的秘室聊天室

    借着放假期间将NodeJS重新回顾了一下并玩了一下sketch来进行设计界面,很不错.(注:代码整理后会放到github上,请关注.) 本次聊天室我给它定义了一个名称叫“秘密聊天室”. 需求: 技术选 ...

  4. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  5. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  6. 记录一次bug解决过程：mybatis中$和#的使用

    一.总结 mybatis中使用sqlMap进行sql查询时,经常需要动态传递参数.动态SQL是mybatis的强大特性之一,也是它优于其他ORM框架的一个重要原因.mybatis在对sql语句进行预编 ...

  7. WCF入门教程2——创建第一个WCF程序

    本节目标 掌握接口 理解契约式编程 创建宿主程序 创建客户端程序访问服务 什么是接口 认识一下接口 必须知道的接口特性 接口不可以被实例化(常作为类型使用) 实现类必须实现接口的所有方法(抽象类除外) ...

  8. [连载]《C#通讯（串口和网络）框架的设计与实现》- 8.总体控制器的设计

    目       录 第八章           总体控制器的设计... 2 8.1           总控制器的职能... 2 8.2           组装和释放部件... 3 8.3      ...

  9. 浅谈为之奋斗过的Set接口

    Set接口 Set接口存储一组唯一,无序的对象 HashSet 是Set接口常用的实现类 HashSet允许集合元素值为null 操作数据的方法与List类似 Set接口不存在get()方法 set ...

  10. px、dp和sp，这些单位有什么区别？

    DP 这个是最常用但也最难理解的尺寸单位.它与“像素密度”密切相关,所以 首先我们解释一下什么是像素密度.假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算 ...