我们先来看一个简单的例子。 首先是HTML的部分。
我是第一个p标签
我是第二个p标签
然后，与两个选择器对应的CSS代码如下所示。
p:nth-child(2) { color: red； }
p:nth-of-type(2) { color: red； }
在上面的示例中，这两个选择器实现的效果一致，第二个p标签的字符为红色：
虽然上面两个demo的最终效果一致，但两个选择器之间必然存在差异。
对于：nth-child选择器，简单的白色谈话意味着选择元素。
1、这是段落要素
2、这是父母标签上的第二个孩子要素
对于：nth-of-type选择器，表示选择元素。
1 .选择父标签第二个段落的子元素
稍微修改一下上面的示例，可以看到两个选择器之间的区别： HTML代码：
我是普通的div标签。 我是第一个p标签
我是第二个p标签
还是与上面示例匹配的CSS测试代码：
p:nth-child(2) { color: red； }
p:nth-of-type(2) { color: red； }
此时，两个选择器渲染的结果不同。
p:nth-child(2)渲染导致第一个p标签(父标签的第二子元素)变红，而不是第二个p标签的文本变红。
p:nth-of-type(2)表达清晰，将希望渲染的第二个p标签染成红色。
希望以上是正文的全部内容，对大家的学习有帮助。 另外，我希望你支持很多编剧。