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

一、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. Xmind pro Win10系统下安装问题解决与破解

    Xmind pro Win10系统下安装问题解决与破解 1.下载安装版本 解压包含文件: xmind-8-update7-windows--安装包 和XMindCrack.jar--激活破解工具 2. ...

  2. js生成一个指定范围内的随机整数

    function __random(start=0, end=1) { return Math.floor(Math.random() * (end - start + 1) + start); } ...

  3. 使用错误代码对象进行C++错误处理

    原文发表于codeproject,由本人翻译整理分享于此. 前言 我已经使用了本文描述的代码和机制近20年了,到目前为止,我还没有找到更好的方法来处理大型C++项目中的错误.最初的想法是从一篇文章(D ...

  4. 在vue+elementUI项目中使用分页功能

    HTML: <div class="mRttt">         <!-- 分页 -->          <el-pagination       ...

  5. JQ前端上传图片显示在页面以及发送到后端服务器

    // 单张上传照片     html: <div class="azwoo"></div> <div class="azwot"& ...

  6. python正则表达式去除文本中间的换行符

    例如文本: 在这个活动中,请各位同学做一下自我介绍,也看看别的同学的自我介绍,看看谁的介绍更有个性!也许你能在这里找到志趣相投的学习伙伴.也希望大家能够彼此关注,相互鼓励,共同学习. 你的发帖可以包含 ...

  7. 搭建DHProxy服务器

                                                                               集群与存储    HAProxy简介        ...

  8. python的int float if...else

    # 字符串 string  单引号 ‘ ’  双引号 “  ”-包含的 app = 'dongt woory' 外面单引号里面可以双引号,外面双引号,里面也可以单引号 app ='你是真的“好看”吗' ...

  9. word多级列表应用

  10. 21.1 Math(数学运算)方法使用 、工具类

    package day21_static.meathDemo; //Math: 包含一些基本的数学运算方法 //从api中搜Math,它都用的static修饰. public class MethDe ...