您的位置：首页 > 教程笔记 > 前端笔记

nth-of-type()和nth-child()选择器的区别

2023-12-04 13:48:01 前端笔记 211

标题中的两个选择器，有不少朋友对它们之间的区别还不够明了，下面就做一下简单介绍。

关于两个选择器的用法可以参阅以下两篇文章:

（1）.nth-of-type()一章节。

（2）.nth-child()一章节。

其实如果认真阅读上面两篇文章，充分理解了两个选择器的使用，那么区别自然了然于胸。

这里为了方便学习，就将它们的主要区别在这里做一下介绍，需要的朋友可以做一下参考。

区别:

nth-child()强调的是父元素下的子元素（这时候并不在意元素类型），然后从这些子元素中再进行筛选。

nth-of-type()强调的是同类型兄弟元素，然后从这些元素中再进行筛选。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>实例</title>
<style type="text/css">
p:nth-child(2) {
  color:green;
}
</style>
</head>
<body>
  <h1>实例</h1>
  <p>实例一</p>
  <p>实例二</p>
  <p>实例三</p>
  <p>实例四</p>
</body>
</html>

在上面的代码中，首先是查找body的子元素中的第二个元素（不区分元素类型），然后查看第二个元素是否是p元素，如果是，则将其字体颜色设置为绿色。它强调的是从子元素中筛选，并不区分类型。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>实例</title>
<style type="text/css">
p:nth-of-type(2) {
  color:green;
}
</style>
</head>
<body>
  <h1>实例</h1>
  <p>实例一</p>
  <p>实例二</p>
  <p>实例三</p>
  <p>实例四</p>
</body>
</html>

上面的代码是首先区分类型，获取了h1元素集合和p元素集合。

然后从p元素集合中查找出第二个元素，然后将其字体颜色设置为绿色。