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

快乐打工仔 分类:实例代码

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

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

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

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

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

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

区别如下:

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

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

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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="http://www.pipipi.net/" />
<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元素集合中查找出第二个元素,然后将其字体颜色设置为绿色。

回复

我来回复
  • 暂无回复内容