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

一、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. ios shell打包脚本 gym

    #! /bin/bash project_path=$() project_config=Release output_path=~/Desktop build_scheme=YKTicketsApp ...

  2. mybatis入门二-----增删改查

    一.使用MyBatis对表执行CRUD操作——基于XML的实现 1.定义sql映射xml文件 userMapper.xml文件的内容如下: <?xml version="1.0&quo ...

  3. element的多文件上传

    项目需求: 可上传多个文件 可删除 文件过大时用户输入可上传至其他网站,并将文件名和地址上传至本网站 问题点: 大文件用户输入内容无法合并到已上传文件的列表进行展示 上传多个大文件地址时前面已上传的大 ...

  4. STL之map与pair与unordered_map常用函数详解

    STL之map与pair与unordered_map常用函数详解 一.map的概述 map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称 ...

  5. Java 虚拟机运行时数据区

    写在前面 本文描述的有关于 JVM 的运行时数据区是基于 HotSpot 虚拟机. 概述 JVM 在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以 ...

  6. STM32F103ZET6时钟

    1.STM32F103ZET6时钟说明 STM32F103ZET6的时钟树图如下所示: STM32F103ZET6有很多个时钟源,分别有: HSE:高速外部时钟信号. HSI:高速内部部时钟信号. L ...

  7. PTA数据结构与算法题目集(中文) 7-6

    PTA数据结构与算法题目集(中文)  7-6 7-6 列出连通集 (25 分)   给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时, ...

  8. 关于AUI框架自学心得

    2018年8月25日今天星期六,这段时间接触到移动端布局框架AUI,借着早上一个小时时间大致看了一下开发文档(后面统称文档),对AUI一点认识. 目前2.0版本为最新版,这个版本和1.0比较升级很多. ...

  9. spark 独立应用编程之 Java 编程

    文章更新于:2020-04-03 按照惯例,文件附上链接放在文首. 文件名:apache-maven-3.6.3-bin.tar.gz 文件大小:9.1 MB 下载链接:https://www.lan ...

  10. [ddt02篇]十年测试老鸟帮您解析:ddt结合txt,excel,csv,mysql实现自动化测试数据驱动

    一.前言: 阅读此文之前请先阅读: [ddt01篇]十年测试老鸟帮您解析:ddt数据驱动入门基础应用:https://www.cnblogs.com/csmashang/p/12679448.html ...