nth-child与nth-of-type的容易比较

:nth-child(1n+0) { /* 样式 */ }
:nth-child(n+0) { /* 样式 */ }
:nth-child(1n) { /* 样式 */ }

除了使用这个函数，我们还可以传递一个整数，例如 :nth-child(1)，或者set关键字，odd（奇数）或者even（偶数）。这些关键字是写出用于选择每个奇数或偶数元素的函数符号的备选方案。

:nth-child(odd) { /* 奇数元素的样式 */ }
:nth-child(2n+1) { /* 奇数元素的样式 */ }

:nth-child(even) { /* 偶数元素的样式 */ }
:nth-child(2n+0) { /* 偶数元素的样式 */ }
:nth-child()单独使用时，可以很容易地预测选择哪个元素。例如，使用此标记：
<div class="example">
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<div>This is a <em>divider</em>.</div> <!-- 选择元素-->
	<p>This is a <em>paragraph</em>.</p>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
	<p>This is a <em>paragraph</em>.</p>
	<div>This is a <em>divider</em>.</div>
</div>
如果我们想选择第五个元素div，我们可以简单地写下面的内容
.example :nth-child(5) { background: #ffdb3a; }
但是，当存在多种类型的元素时，可能会出现意外结果，并且我们需要将:nth-child()伪类与类型或类选择器组合在一起。例如，要再次选择相同的div元素，我们可能会尝试编写以下内容：
.example div:nth-child(2) { background: #ffdb3a; }
这段代码不起作用！
不起作用的原因是因为选择器所针对的元素实际上并不存在。使用上述选择器，将执行以下步骤
1、选择所有 .example的子元素
2、查找该列表中的第二个元素，无论其类型如何
3、检查该元素是否是div的类型 
由于文档树中的第二个元素是段落，而不是div，因此不会选择任何内容。如果我们想要选择第二个div元素，我们将不得不使用nth-of-type()伪类。
nth-of-type()是怎样工作的？
nth-of-type()伪类，如nth-child()一样，是用于根据一个元素匹配一个元素。然而，它里面的数字表示元素的位置仅在其兄弟姐妹中具有相同元素类型的位置。
nth-of-type()里面的参数也可以表示为函数，或使用关键字even或odd。使用上面的示例标记，我们可以通过写入选择所有奇数段落：
.example p:nth-of-type(odd) { background: #ffdb3a; }
当我们使用此选择器时，将执行以下步骤：
1、选择.example的所有p类型子元素
2、仅创建这些元素的新列表
3、从列表中选择奇数
因此，我们现在可以选择.example的第二个div，即第五个孩子：
.example div:nth-of-type(2) { /* 样式 */ }
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
以上就是nth-child和nth-of-type的简单比较的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：nth-child与nth-of-type的容易比较