随笔之——伪类选择器:nth-child(n) 与 nth-of-type(n)的区别!!!
话不多说!直接正题!!!
一、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)的区别!!!的更多相关文章
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS选择器之伪类选择器(元素)
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
随机推荐
- Python python 函数参数:关键字参数
# 关键字参数 '''关键字参数代表传入任意个含参数名的参数,这些关键字参数在函数内部自动组装为一个dict ''' def student(name,sex,**keywords): print(' ...
- Springboot使用自定义注解实现简单参数加密解密(注解+HandlerMethodArgumentResolver)
前言 我黄汉三又回来了,快半年没更新博客了,这半年来的经历实属不易,疫情当头,本人实习的公司没有跟员工共患难, 直接辞掉了很多人.作为一个实习生,本人也被无情开除了.所以本人又得重新准备找工作了. 算 ...
- Ubuntu系统下命令行查看自己已安装的桌面环境问题
原因:有时我们进行远程连接时需要知道我们的Ubuntu系统已安装的桌面环境,这时我们可以使用[dpkg]命令. [dpkg]:dpkg命令是Debian Linux系统用来安装.创建和管理软件包的实用 ...
- [vijos]1051送给圣诞夜的极光<BFS>
送给圣诞夜的极光 题目链接:https://www.vijos.org/p/1051 这是一道很水很水的宽搜水题,我主要是觉得自己在搜素这一块有点生疏于是随便找了一题练手,找到这么一道水题,原本以为可 ...
- C 苟富贵
时间限制 : 15000 MS 空间限制 : 524288 KB 问题描述 你最近买六合彩赚了很多钱,导致一个银行账户存不下了,于是你开设了 N 个账户,第 i 个账户里存有 Ai 元. 你的好友 ...
- 2020年Java多线程与并发系列22道高频面试题(附思维导图和答案解析)
前言 现在不管是大公司还是小公司,去面试都会问到多线程与并发编程的知识,大家面试的时候这方面的知识一定要提前做好储备. 关于多线程与并发的知识总结了一个思维导图,分享给大家 1.Java中实现多线程有 ...
- 使用Spring实例化Bean的方法以及Bean取别名
一.通过构造方法实例化Bean bean中加构造方法 public class Bean1 { public Bean1() { System.out.println("Bean1构造方法. ...
- Java 网络编程相关知识
网络的一些基础知识 IP地址分类 IP地址根据网络ID的不同分为5种类型,A类地址.B类地址.C类地址.D类地址和E类地址.A类保留给政府机构,B类分配给中等规模的公司,C类分配给任何需要的人,D类用 ...
- Java代理笔记
代理顾名思义,就是一个中间层,当我们要使用某个方法时,不直接调用,而是告诉代理,让代理替我们去请求方法,并返回结果.在这个过程中,我们只知道代理执行并返回给了我们操作结果,至于它有没有其他操作并不知道 ...
- 痞子衡嵌入式:走进二维码(QR Code)的世界(1)- 引言
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是走进二维码(QR Code)的世界专题的引言. 如今二维码可以说是深入走进大家的生活了,推送名片.扫码支付都离不开它,大家几乎每天都会和 ...