nth-child和nth-of-type的简单比较

nth-child()和nth-of-type()都是css的“结构”伪类选择器，这些伪类选择器允许我们基于文档树中的信息选择元素，这些元素通常不能由其他简单选择器表示。

就nth-child()和nth-of-type()来说，额外信息是元素在文档树中相对于其父元素和兄弟元素的位置。 尽管这两个伪类非常相似，但它们的工作方式却截然不同。

nth-child()是怎样工作的？

nth-child()伪类用于根据数字匹配元素，该数字表示元素在其兄弟元素中的位置。更具体地说，数字表示文档树中元素（减去1）之前存在的兄弟姐妹的数量。

这个数表示为函数a+b，其中n是索引，a和b是我们通过的任何整数。例如，为了选择每一个元素，我们可以编写以下任何一个：

: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()单独使用时，可以很容易地预测选择哪个元素。例如，使用此标记：

	
This is a paragraph.
	
This is a paragraph.
	
This is a paragraph.
	
This is a divider.
	
This is a divider.
 
	
This is a paragraph.
	
This is a paragraph.
	
This is a divider.
	
This is a paragraph.
	
This is a divider.

如果我们想选择第五个元素div，我们可以简单地写下面的内容

.example :nth-child(5) { background: #ffdb3a; }

当我们使用此选择器时，将执行以下步骤：

1、选择.example的所有p类型子元素

2、仅创建这些元素的新列表

3、从列表中选择奇数

因此，我们现在可以选择.example的第二个div，即第五个孩子：

.example div:nth-of-type(2) { /* 样式 */ }

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上就是nth-child和nth-of-type的简单比较的详细内容，更多请关注 第一PHP社区 其它相关文章！