nth-child()和nth-of-type()的区别

原创 2018年04月14日 22:20:24

nth-child()

例如:p:nth-child(3)表示满足父元素下的p元素,并且在父元素下位置排第三。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nth-child()和nth-of-type()</title>
	<style>
	p:nth-child(3){
		color:red;
	}
	</style>
</head>
<body>
	<section>
		<div>第一个div</div>
		<div>第二个div</div>
	        <p>第一个p元素</p>
	        <p>第一个p元素</p>
		<span>第一个span元素</span>
	</section>
</body>
</html>

结果:

nth-of-type()

例如:div:nth-of-type(2):表示父级元素下的第二个div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nth-child()和nth-of-type()</title>
	<style>
	div:nth-of-type(2){
		color:yellow;
	}
	</style>
</head>
<body>
	<section>
		<div>第一个div</div>	
	        <p>第一个p元素</p>
	        <p>第一个p元素</p>
		<span>第一个span元素</span>
		<div>第二个div</div>
	</section>
</body>
</html>

结果:



选择中的:nth-child(n)和:nth-of-type(n)的区别

w3c官方是这样解释的::nth-child(n) 例 p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。:nth-of-type(n) 例 p:nt...
  • zengyonglan
  • zengyonglan
  • 2016-11-09 23:20:38
  • 388

CSS3伪类选择器nth-child和nth-of-type浅析

1. nth-child定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,不论元素的类型。n 可以是数字、关键词或公式。① n为数字时,n为大于0的整数.box :n...
  • perhapschen
  • perhapschen
  • 2016-05-19 19:36:02
  • 825

css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别

这个文章标题似乎太长了。但是不点明又不大好。哈哈,暂且不要在意这些细节了,说说今天的主角 CSS的伪类选择器:nth-child,至于为什么还需要配角:nth-of-type,是因为我个人觉得这两个...
  • u014516981
  • u014516981
  • 2016-06-13 22:57:49
  • 1290

关于css选择器中nth-of-type和nth-child的区别

前言今天学习了css选择器,发现有两个伪类nth-of-type和nth-child在功能上十分相似,却又有不同的地方。但我发现无论是在MDN上,还是在w3school、菜鸟教程上,对这两个伪类选择器...
  • weixin_35955795
  • weixin_35955795
  • 2016-11-26 12:43:03
  • 801

css中的first-child nth-child nth-last-child() 和:nth-of-type(n)

先看定义  :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型...
  • zhouxuan623
  • zhouxuan623
  • 2016-04-15 14:59:29
  • 799

nth-child(n)的IE8兼容问题

写作背景 今天有个列表中第一行边框有特殊样式,第二个要求没有,其他的要求有边框 经常用:first-child 但是第二个确不是second-child 而是用css3的nth-child(n...
  • qq443068902
  • qq443068902
  • 2016-01-25 19:52:01
  • 5736

css选择器中:first-child与:first-of-type的区别///CSS3伪类nth-of-type(n)用法详解

原文:http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如...
  • zsx930305
  • zsx930305
  • 2016-09-20 14:50:50
  • 226

解决IE8下CSS3选择器 :nth-child() 不兼容的问题

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • FrontEnder_way
  • FrontEnder_way
  • 2016-05-09 17:43:53
  • 18939

:nth-child和:nth-of-type之间的差异

参考文章 CSS3选择器:nth-child和:nth-of-type之间的差异 举例来说: p:nth-child(2)选择的是其父元素下的第二个子元素,且为p元素。此处关键的是一定选择的是其...
  • crystal6918
  • crystal6918
  • 2017-07-13 09:37:54
  • 166

CSS选择器 first-child 、first-of-type 和 nth-of-type()

块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中,必须声明 。 first-child:选...
  • erciyuan_nuonuo
  • erciyuan_nuonuo
  • 2016-12-11 21:43:26
  • 571
收藏助手
不良信息举报
您举报文章:nth-child()和nth-of-type()的区别
举报原因:
原因补充:

(最多只允许输入30个字)