结构伪类选择器nth-child与nth-of-type的区别
首先他们都是属于结构伪类选择器，都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号，当查找指定元素是，会先根据序号查找该元素，找到后在与伪类前面的元素进行匹配，匹配一致才赋予样式 如下 nth-child
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
section div:nth-child(1){
background-color: red;
}
</style>
</head>
<body>
<section>
<p>1</p>
<div>2</div>
<div>3</div>
</section>
</body>
</html>我们设置section的第一个元素为背景红色，但是第一个元素为p标签，与div不匹配所以，该代码不会产生效果
nth-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
section div:nth-of-type(1){
background-color: red;
}
</style>
</head>
<body>
<section>
<p>1</p>
<div>2</div>
<div>3</div>
</section>
</body>
</html>与nth-child不同nth-of-type会先匹配在进行标号查找，所以该代码会将第一个div元素高亮
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-08-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
