css中关于:nth-child()和:nth-of-type()的深入理解

在css中有这样一类属性，是以:nth-开头的，其中最常见的就是:nth-child() 和 :nth-of-type()，两者既有相同的地方，也有不同的地方。

  • 相同的地方：都是修改父级下的的几个同级的元素的样式
  • 不同的地方：:nth-child()是修改父元素下的同级元素的第n个元素内的样式，但是:nth-of-type()是修改父元素下的同级元素的第n个同类型元素的样式。例如：p:nth-of-type(2)就是修改p元素的父级元素下的与p同级的第二个p元素的样式；p:nth-child(2)就是修改p元素的父级元素下的与p同级的第二个元素的样式。
<style>

		/* 修改body下面的第二个元素的样式，注意是同级元素**/

		body :nth-child(2) {

			color: red;

		}

		/* 修改body下面的每一种元素的第二个元素的样式，注意是同级元素*/

		body :nth-of-type(2) {

			color: green;

		}

	</style>


<body>

    <a href="#">测试a</a>

    <div>测试div</div>

    <p>测试p</p>

    <a href="#">测试a</a>

    <div>测试div</div>

    <p>测试p</p>

    <b>测试b</b>

    <div>测试div</div>

    <p>测试p</p>

    <a href="#">测试a</a>

    <b>测试b</b>

	<p>测试p</p>

</body>

结果如下：

css中关于:nth-child()和:nth-of-type()的深入理解的更多相关文章

  1. css中单位px,em，rem和vh/vw的理解

    >px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认 ...

  2. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  3. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  4. CSS中!important的使用 转

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

  5. Css中如何使英文和拼音变成全大写、全小写和首字母大写？

    想要实现英文和中文拼音变成全大写.全小写和首个字母大写,需要用到 css中text-transform样式属性,接下来介绍一下 1.text-transform的值 1)Capitalize:英文拼音 ...

  6. 如何在CSS中使用变量

    前言 CSS变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用.它们使管理颜色.字体.大小和动画值变得更加容易,并确保整个web应用的一致性. 举个例子,你可以将品牌颜色 ...

  7. CSS中有关水平居中和垂直居中的解决办法

    CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位 ...

  8. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

  9. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  10. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

随机推荐

  1. 记一次 Microsoft.Bcl.Async 使用经验

    起因: 由于公司项目使用场景存在很多的XP环境,导致使用.NET Framework版本不能大于4.0版本.最近开发新功能时:从nuget上下载一个开源dll(该dll 4.0 版本依赖 Micros ...

  2. IDEA 2020.1.2安装破解激活 idea 2020.1.3下载 安装 一键破解

    IDEA 2020.1.2 idea 2020.1.3下载 安装 破解 本项目只做个人学习研究之用,不得用于商业用途!若资金允许,请点击链接购买正版,谢谢合作!学生凭学生证可免费申请正版授权!创业公司 ...

  3. [日常摘要] -- ThreadLocal篇

    简介 ThreadLocal,即线程变量,是一个以ThreadLocal对象为键.任意对象为值的存储结构.这个结构被附带在线程上,也就是说一个线程可以根据一个ThreadLocal对象查询到绑定在这个 ...

  4. Vue nextTick 学习历程

    nextTick 详解 这是官网的解释,比较简洁精炼,反正我是第一遍什么都没看懂 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 经过我一步步测试 ...

  5. JVM系列之:Contend注解和false-sharing

    目录 简介 false-sharing的由来 怎么解决? 使用JOL分析 Contended在JDK9中的问题 padded和unpadded性能对比 Contended在JDK中的使用 总结 简介 ...

  6. 【Nginx】并发量太高，Nginx扛不住？这次我错怪Nginx了！！

    写在前面 最近,在服务器上搭建了一套压测环境,不为别的,就为压测下Nginx的性能,到底有没有传说中的那么牛逼!具体环境为:11台虚拟机,全部安装CentOS 6.8 64位操作系统,1台安装部署Ng ...

  7. Vue开启gzip压缩文件

    在你的项目使用了Vue的路由懒加载.Vue使用CDN引用项目组件,减少项目体积 后,还是觉得项目加载速度慢,效果不尽如人意的时候,还有一个“瘦身项目”可以完成,那就是利用nginx和webpack来使 ...

  8. sqlite 显示表内容时乱码，无法正常显示汉字，

    把txt文件另存为时,选择编码为utf-8即可

  9. 深入探究JVM之垃圾回收算法实现细节

    @ 目录 前言 垃圾回收算法实现细节 根节点枚举 安全点 安全区域 记忆集和卡表 写屏障 并发的可达性分析 低延迟GC Shenandoah ZGC 总结 前言 本篇紧接上文,主要讲解垃圾回收算法的实 ...

  10. Git文件合并

    两个分支:主分支master,分支pre 1.将pre分支文件合并到master分支: 切换到master分支下操作: 合并文件夹[如果是文件则为a.text b.text]: git checkou ...