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

一、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. 记录---java中jsp页面引入jquery路径的问题

    今天在jsp页面中引入jquery的时候因为路径不对总是报404,网上的方法找到几种试了试但是最后结果还是不生效,遂想起原先的项目中有引入外部jquery的例子,所以立马看了看,发现当时的项目中是用$ ...

  2. CSS实现文本，DIV垂直居中

    https://blog.csdn.net/linayangoo/article/details/88528774 1.水平居中 1.行内元素水平居中 text-align:center; 利用tex ...

  3. jsbrage——和app交互

      <html> <head> <meta content="text/html; charset=utf-8" http-equiv="c ...

  4. pyhton 信号量Semaphore和BoundedSemaphore

    Semaphore和BoundedSemaphore两个,用起来好像没啥区别 都是定义信号量 sem=threading.BoundedSemaphore(5) sem=threading.Semap ...

  5. DOS命令集

    1.ASSOC显示或修改文件扩展名关联.ASSOC [.ext[=[fileType]]]  .ext      指定跟文件类型关联的文件扩展名  fileType  指定跟文件扩展名关联的文件类型键 ...

  6. 天天写order by，你知道Mysql底层执行原理吗？

    前言 文章首发于微信公众号[码猿技术专栏]. 在实际的开发中一定会碰到根据某个字段进行排序后来显示结果的需求,但是你真的理解order by在 Mysql 底层是如何执行的吗? 假设你要查询城市是苏州 ...

  7. 自动生成四则运算题目(C语言)

    Github项目地址:https://github.com/huihuigo/expgenerator 合作者:马文辉(3118005015).卢力衔(3118005013) 项目简介 1题目:实现一 ...

  8. GitHub+PicGo构建免费图床及其高效使用

    搭建免费图床全过程! 一.搭建缘由 一开始搭建博客,避免不了要用许多图片,最初使用七牛云来做博客图床,但是后来发现,七牛云只有30天的临时域名,hhhhhhh,果然啊,天下就没有免费的好事啊~后来就发 ...

  9. Array（数组）对象-->push() 方法

    1.定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法: array.push(item1, item2, ..., itemX) 参数:item1, item2, ...

  10. 数据结构和算法(Golang实现)(8.1)基础知识-前言

    基础知识 学习数据结构和算法.我们要知道一些基础的知识. 一.什么是算法 算法(英文algorithm)这个词在中文里面博大精深,表示算账的方法,也可以表示运筹帷幄的计谋等.在计算机科技里,它表示什么 ...