查了下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. 解析大型.NET ERP系统 数据审计功能

    数据审计,英语表达是Audit,是追踪数据变化的过程,记录数据变化前后的值,供参考分析.通过设置,ERP可以追踪一个表的所有字段的变化,也可以只记录指定的字段的值变化.欧美企业每年都有独立的审计部门, ...

  2. .Net使用Redis详解之ServiceStack.Redis（七）

    序言 本篇从.Net如何接入Reis开始,直至.Net对Redis的各种操作,为了方便学习与做为文档的查看,我做一遍注释展现,其中会对list的阻塞功能和事务的运用做二个案例,进行记录学习. Redi ...

  3. 前端学HTTP之代理

    前面的话 Web代理(proxy)服务器是网络的中间实体,位于客户端和服务器之间,扮演“中间人”的角色,在各端点之间来回传送HTTP报文.本文将介绍HTTP代理服务器相关内容 中间实体 Web上的代理 ...

  4. Encountered an unexpected error when attempting to resolve tag helper directive '@addTagHelper' with value '"*, Microsoft.AspNet.Mvc.TagHelpers"'

    project.json 配置: { "version": "1.0.0-*", "compilationOptions": { " ...

  5. C# 给PDF文件添加水印

      水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...

  6. C#基础回顾（二）—页面值传递、重载与重写、类与结构体、装箱与拆箱

    一.前言 -孤独的路上有梦想作伴,乘风破浪- 二.页面值传递 (1)C#各页面之间可以进行数据的交换和传递,页面之间可根据获取的数据,进行各自的操作(跳转.计算等操作).为了实现多种方式的数据传递,C ...

  7. ASP.NET Core 中文文档 第三章 原理（12）托管

    原文:Hosting 作者:Steve Smith 翻译:娄宇(Lyrics) 校对:何镇汐.许登洋(Seay) 为了运行 ASP.NET Core 应用程序,你需要使用 WebHostBuilder ...

  8. 代码的坏味道（7）——临时字段(Temporary Field)

    坏味道--临时字段(Temporary Field) 特征 临时字段的值只在特定环境下有意义,离开这个环境,它们就什么也不是了. 问题原因 有时你会看到这样的对象:其内某个实例变量仅为某种特定情况而设 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  10. ASP.NET MVC项目演练:用户登录

    ASP.NET MVC 基础入门 http://www.cnblogs.com/liunlls/p/aspnetmvc_gettingstarted.html 设置默认启动页面 public clas ...