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. 通过cmd进入指定D盘下的某个文件夹

    有时候我们在使用电脑的时候,想使用cmd命令提示符,进入d盘,怎么操作呢,下面来分享一下方法 案例描述:如果进入D盘下的test文件夹(D:\test) 1.win10系统环境下,点击搜索输入[cmd ...

  2. Oracle忘记用户名和密码以及管理员用户新增修改删除用户

    Oracle忘记密码: 1.以管理员身份登录,打开dos窗口,输入 sqlplus / as sysdba 回车 2.查看当前用户和状态 select username, account_status ...

  3. springcloud之简介

    springcloud官方文档翻译网站:https://springcloud.cc/ 一.网站架构的演变过程.(这些架构描述的不是很到位,之后需要从新学习) 传统架构 —> 分布式架构 —&g ...

  4. hostapd阅读（openwrt）-1

    好久没有来博客园写点东西了,这段时间主要搞了openwrt系统的移植,无线的校验等相关工作,鉴于我是一个懒惰的大龄菜鸟程序员,就先自我原谅自己了,好了废话少说,直奔主题--hostapd. 由于我主要 ...

  5. flask中url_for使用endpoint和视图函数名

    在flask中,使用url_for 进行路由反转时,需要传递一个endpoint的值,用法如下: @app.route('/', endpoint='my_index') def index(): r ...

  6. 控制语句—for循环、while循环

    for循环 基本结构: for(初始条件1:循环条件2:状态改变3){ 循环体4 } 运行流程:1-2-4-3-2-4 while循环 基本结构: var i=0 //初始条件 1 while(i&l ...

  7. Python JSON的基本使用

    Python JSON的基本使用 一.json格式介绍 JSON(JavaScript Object Notation) 通用的数据类型,易于人阅读和编写. 跟字典有些类似,形式也是key-value ...

  8. Merging 和 Rebasing 的大比拼

    虽然 merging 和 rebasing 在 git 中相似时,但他们提供不同的功能.为了让你的历史尽可能的干净和完整,你应该知道以下几点. git rebase 命令已 神奇的 Git voodo ...

  9. jmeter正则表达式，萌新入门篇

    @@@@@@@@@@@@ 透过现象看本质 jmeter中正则表达式对我们来说,就是一个工具,他可以帮助我们做的事就是从一堆数据中截取出我们想要的字段,比如从setcookie:DERF12456DAS ...

  10. Django学习路30_view中存在重复名时,取第一个满足条件的

    在 settings 中添加 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con ...