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

一、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. 那些年,我们追过的java8

    9月份java9就要发布了,在8月的最后一天决定回顾一下java8那些惊天动地的变化,加深理解,共同进步. 我们都知道java与c++,c不同是一个为面向对象而生的语言,面向对象思想贯彻了java发展 ...

  2. Python学习笔记:函数和变量详解

    一.面向对象:将客观世界的事物抽象成计算机中的数据结构 类:用class定义,这是当前编程的重点范式,以后会单独介绍. 二.函数编程:逻辑结构化和过程化的一种编程方法 1.函数-->用def定义 ...

  3. ScheduledThreadPoolExecutor之remove方法

    之前用定时任务的线程池,设置了个任务,但是突然今天产品说,某些个操作需要中断某些任务(如果任务还没有执行),使其不能再到点执行了.于是查了API果然有这样一个方法. 一看API,需要移除的是一个Run ...

  4. 全网独家:成长经历分享 & 我为什么要写书?

    在当今高速发展的移动互联网+云优先的时代,到处充斥着不可预知的变化,有的来自于客户需求的变化,有的来自于市场环境的变化,面对着这些变化,给企业在市场.渠道.产品.服务各方面都带来了一系列新的挑战,每个 ...

  5. ANTLR随笔(三)

    ANTLR基本语法 前面已经简单介绍了ANTLR以及怎么安装和测试. 同学们应该大概清楚ANTLR的使用场景,但是对于关键步骤,怎么编写一个语法文件并没有详细介绍,这篇笔记主要详细讲解一下ANTLR的 ...

  6. 使用原生方法查询指定元素是否包含指定className

    如果我们要查找某个指定元素是否包含指定的className,可以使用以下方法 eg:document.getElementById('Id').classList.contains('要查询的clas ...

  7. javascript中常见的表单验证项

    1.不能超过20个字符 <body> <form name=a onsubmit="return test()"> <textarea name=&q ...

  8. mysql正则匹配中文时存在的问题

    可以看到,目前正则匹配字母没问题,c出现1次,2次,3次匹配的结果都是正常的 接下来我们看看匹配中文的效果 可以看到,当匹配连续出现歪时,结果就开始不正常了 然后我去看了下mysql的中文文档中关于正 ...

  9. Jmeter 压力测试笔记(1)--服务器迁移失败

    近期,公司服务器因技术架构升级等原因需要迁移,在经过开发,运维DBA,测试多部门进行联合讨论后,制定出了迁移方案.迁移前也对APP应用进行了各种测试,并没有发现问题. 凌晨2点开始迁移,5点完成迁移. ...

  10. python基本知识点if、while、等等

    给予Python的相关知识点: 主要是对于基本语句的相关使用if else while for等先关的应用,以及步骤如下: 尝试编程如下:还有就是对于 import math import rando ...