css伪类nth-child和nth-of-type的区别

最新推荐文章于 2022-09-13 12:16:25 发布

wll_blogs

最新推荐文章于 2022-09-13 12:16:25 发布

阅读量189

点赞数

分类专栏： css3 文章标签： nth-child nth-of-type nth-child和nth-of-type的区别

本文链接：https://blog.csdn.net/wll_web/article/details/103423353

版权

css3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

css伪类nth-child和nth-of-type的区别

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <style>
	#aa .aa:nth-child(1){border:1px solid red}
	#bb .bb:nth-of-type(1){border:1px solid blue}
  </style>
 </head>
 <body>
  <p>nth-child:</p>
  <div id="aa">
	<div class="aa">div</div>
	<span class="aa">span</span>
	<p class="aa">p</p>
	<h1 class="aa">h1</h1>
	<h2 class="aa">h2</h2>
  </div>
  <p>nth-of-type:</p>
  <div id="bb">
	<div class="bb">div</div>
	<span class="bb">span</span>
	<p class="bb">p</p>
	<h1 class="bb">h1</h1>
	<h2 class="bb">h2</h2>
  </div>
 </body>
</html>

页面效果：
nth-child nth-of-type区别

同样是设置第一个元素样式：
nth-child只考虑父元素下的子元素个数，不考虑元素类型；
nth-of-type考虑的是父元素下存在的元素类型，并把每种类型单独统计计数。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wll_blogs

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css伪类nth-child和nth-of-type的区别

css伪类nth-child和nth-of-type的区别<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <style> #aa .aa:nth-child(1){border:1px solid red} #bb .bb:nth-of-type...
复制链接

扫一扫