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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4. <head>
  5. <style>
  6.     * {padding: .5em;}
  7.     .para:nth-of-type(1) {background-color: red;}
  8. </style>
  9. </head>
  10. <body>
  11.  
  12.     <p class="para">我是第1个p.para标签</p>
  13.     <p class="para">我是第2个p.para标签</p>
  14.  
  15. </body>
  16. </html>

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

  1.     <p>我是一个普通的p标签</p>
  2.     <p class="para">我是第1个p.para标签</p>
  3.     <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元素

  1.     <div class="para">我是第1个div.para标签</div>
  2.     <div class="para">我是第2个div.para标签</div>
  3.     <div>我是一个普通的div标签</div>
  4.  
  5.     <section class="para">我是第1个section.para标签</section>
  6.     <section class="para">我是第2个section.para标签</section>
  7.     <section>我是一个普通的section标签</section>
  8.  
  9.     <p class="para">我是第1个p.para标签</p>
  10.     <p class="para">我是第2个p.para标签</p>
  11.     <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. ES6之module

    该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...

  2. ZKWeb网站框架介绍

    框架地址 https://github.com/zkweb-framework/ZKWeb https://github.com/zkweb-framework/ZKWeb.Plugins 新的文档地 ...

  3. 【分布式】Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单,读者可以在网上找到相应的教 ...

  4. Windows Phone 8.1又有什么新花样

    今年微软新任CEO提出了“Mobile First and Cloud First”的发展战略,随着微软Mobile First战略的实行,开发者是时候重视Windows Phone了.你可能不相信, ...

  5. <Node入门经典>读书笔记

    最近在读<Node入门经典>, 之前没有做笔记, 今天开始把看过自己又写了的代码放这里以免忘记. express var express = require('express') var ...

  6. OA办公自动化系统源码

    最新extjs6富客户端,.net平台开发,sql server数据库,基础权限人员基础平台,可方便二次开发,使用EF为orm,autofac为ioc,Castle为基础的aop,实现常用OA系统功能 ...

  7. C#开发微信门户及应用(35)--微信支付之企业付款封装操作

    在前面几篇随笔,都是介绍微信支付及红包相关的内容,其实支付部分的内容还有很多,例如企业付款.公众号支付或刷卡支付.摇一摇红包.代金券等方面的内容,这些都是微信接口支持的内容,本篇继续微信支付这一主题, ...

  8. WCF学习系列一【WCF Interview Questions-Part 1 翻译系列】

    http://www.topwcftutorials.net/2012/08/wcf-faqs-part1.html WCF Interview Questions – Part 1 This WCF ...

  9. WaitGroup is reused before previous Wait has returned

    当你Add()之前,就Wait()了,就会发生这个错误.

  10. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...