话不多说！直接正题！！！

一、E:nth-child(n)///选中父元素中第（n）个元素.若第n个元素为E则选中；若第n个不为E则不选中。n可以为2n（偶数）、2n+1（奇数）、等...

二、E:nth-of-type(n)///选中父元素中第（n）个为E的元素。n的取值同上。

三、   举个栗子>>>

（1）下图可以看出两个选择符均可以达到想要的效果；没有什么区别。。。（往下看！）

 

（2）、下图可以看出两者的区别之处：li:nth-child（2)直接选中父元素中第二个元素 /// li:nth-of-type(2)则是选中父元素中第二个为li的元素。

深呼吸，下面还有。

（3）下面的图可以更加的确定他们的区别之处。。。

在其上多加了span，就出现了不一样的效果，可以看出nth-child受上面的影响很大，而nth-of-type则可以精确的选出来，无论上面添加标签与否///

这样，通过例子，就知道上面一、二两点的意思了！！！

随笔之——伪类选择器：nth-child(n) 与 nth-of-type(n)的区别！！！的更多相关文章

  1. js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

    js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...

  2. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  3. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  4. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  5. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  6. CSS选择器之伪类选择器（元素）

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  7. 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  8. CSS3新增的伪类选择器

    伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...

  9. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

随机推荐

  1. Functor、Applicative 和 Monad

    Functor.Applicative 和 Monad 是函数式编程语言中三个非常重要的概念,尤其是 Monad. 说明:本文中的主要代码为 Haskell 语言,它是一门纯函数式的编程语言. 一.结 ...

  2. jsp学习笔记day2

    一.jsp基础语法 1.注释 显式注释语法: <!--注释内容-->客户端可以看见 隐式注释语法:客户端不能看见 <% //单行注释 /*多行注释*/ %> 2.Scriptl ...

  3. 模块 pillow图像处理

    Pillow概况 PIL是Python的一种图像处理工具. PIL支持大部分的图像格式,高效并强大. 核心库设计用来高速访问基于基于像素的数据存储,给这个通用的图像处理工具提供了坚实的基础. 一.读. ...

  4. 使用docsify 写开源文档

    使用docsify 写开源文档 官网:https://docsify.js.org/#/ docsify 是一个动态生成文档网站的工具.不同于 GitBook.Hexo 的地方是它不会生成将 .md ...

  5. coderforces Gym 100803A/Aizu 1345/CSU 1536/UVALive 6832 Bit String Reordering（贪心证明缺）

    Portal: http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=1345  http://codeforces.com/gym/100 ...

  6. python学习笔记--字符串格式化

    字符串和常量 print(r'hello\py\thon') r 代表后面字符不进行转义,原样输出; 表示常量,命名时变量名字大写代表常量.NAME = 'liulixue'; 字符串表示:' ', ...

  7. IO 模型知多少

    1. 引言 同步异步I/O,阻塞非阻塞I/O是程序员老生常谈的话题了,也是自己一直以来懵懵懂懂的一个话题.比如:何为同步异步?何为阻塞与非阻塞?二者的区别在哪里?阻塞在何处?为什么会有多种IO模型,分 ...

  8. Linux网络安全篇，进入SELinux的世界（三）

    SELinux防火墙配套的服务 一.auditd 1.基本功能 将详细信息写入到 /var/log/audit/audit.log文件 2.设置开机自动启动 chkconfig --list audi ...

  9. pycharm 永久激活方法

    打开终端,执行: cd /etc/ sudo vim hosts 在最后一行加上: 0.0.0.0 account.jetbrains.com 打开pycharm,选择Activation Code ...

  10. mysql中的PACK_KEYS

    原文  http://jackyrong.iteye.com/blog/2170222 在mysql的myisam引擎中,有一个是容易忽视的,叫压缩索引PACK_KEYS , myISAM使用前缀压缩 ...