查了下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. 搭建LNAMP环境（一）- 源码安装MySQL5.6

    1.yum安装编译mysql需要的包 yum -y install gcc-c++ make cmake bison-devel ncurses-devel perl 2.为mysql创建一个新的用户 ...

  2. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  3. 日常css技巧小结（2）-- inline-block带来的迷惑

    一.问题描述 在平时布局中,inline-block使用的频率比很高,主要是因为可以让行标签设置宽高.我在布局过程中,发现了两个“问题”, 1行标签.display:inline-block之后的行标 ...

  4. jquery dataTable汉化（插件形式）

    1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注: ...

  5. Grunt学习使用

    原文地址:Grunt学习使用必看 grunt简介神马的不多说,到处一大堆. 我只说说我已经实现了的代码. 按照官方的教程 相信已经配置好了,接下来说 package.json 和 Gruntfile. ...

  6. PyQt4入门学习笔记（五）

    PyQt4里的对话框 对话框是大多数GUI应用中不可分割的一部分.一个对话框是两者或多者的会话.在GUI内,对话框是应用向人说话的方式.一个对话框可以用来输入数据,修改数据,改变应用设置等等. QtG ...

  7. C# - 多线程 之 进程与线程

    并行~并发 并发 Concurrency,逻辑上的同时发生,一个处理器(在不同时刻或者说在同一时间间隔内)"同时"处理多个任务.宏观上是并发的,微观上是按排队等待.唤醒.执行的步骤 ...

  8. C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能

    前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫. ...

  9. 【夯实PHP基础】PHP的反射机制

    本文地址 分享提纲: 1. 介绍 2. 具体例子 2.1 创建Persion类 2.2 反射过程 2.3 反射后使用 1. 介绍 -- PHP5添加了一项新的功能:Reflection.这个功能使得p ...

  10. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...