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

一、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. sql server 数据库安装手册

    1. 双击setup.exe运行安装程序,进入[SQL Server 安装中心] 2. 选择左侧菜单栏[安装],运行第一项[全新安装或向现有安装添加功能] 3. 进入[SQL Server 2008 ...

  2. Kubernets中获取客户端真实IP总结

    1. 导言 绝大多数业务场景都是需要知道客户端IP的 在k8s中运行的业务项目,如何获取到客户端真实IP? 本文总结了通行的2种方式 要答案的直接看方式一.方式二和总结 SEO 关键字 nginx i ...

  3. OI滚粗记

    1) 第一次接触OI是在初一,现在算下都四年了,最开始还是用的Pascal,而现在,Pascal都快被淘汰了.四年的OI生涯让我领会了很多,虽然失去了很多,但是也收获了少,这场名叫OI的生活,我不后悔 ...

  4. [codevs]1250斐波那契数列<矩阵乘法&快速幂>

    题目描述 Description 定义:f0=f1=1, fn=fn-1+fn-2(n>=2).{fi}称为Fibonacci数列. 输入n,求fn mod q.其中1<=q<=30 ...

  5. VLAN基础

    VLAN(Virtual Local Area Network)的中文名为"虚拟局域网".是将一个物理的局域网在逻辑上划分成多个广播域,从而实现二层隔离的技术. 一.VLAN的优点 ...

  6. 新建jsp文件，The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path错误解决方法

    新建一个jsp文件后,有一个错误,The superclass "javax.servlet.http.HttpServlet" was not found on the Java ...

  7. springboot 启动时执行方法

    Springboot提供了两种“开机启动”某些方法的方式:ApplicationRunner和CommandLineRunner.下面简单介绍下ApplicationRunner 1.创建个Tests ...

  8. 关于selenium定位元素时，出现此问题的处理办法：find_element=wait.until(ec.presence_of_element_locatetd(locator))定位不到页面元素的问题

    最近再用,selenium中的from selenium.webdriver.common.by import By方法时,一直报错如下(图一),各种百度都没有解决,最后只能脱离框架,从最原始的代码开 ...

  9. Shell:Day10

    shell脚本:明白一点:shell脚本本身是一个工具 在写shell脚本之前,就要明白:这个功能能到底如何实现? curl 访问文件源代码,查看网站状态: 才能通过shell(bash)所提供的逻辑 ...

  10. 面试官再问你 HashMap 底层原理，就把这篇文章甩给他看

    前言 HashMap 源码和底层原理在现在面试中是必问的.因此,我们非常有必要搞清楚它的底层实现和思想,才能在面试中对答如流,跟面试官大战三百回合.文章较长,介绍了很多原理性的问题,希望对你有所帮助~ ...