CSS3选择器的详细解释：nth-child和n型之间的差异

请看一个简单的示例，首先是HTML部分：



我是第一个P标签
我是第二个P标签



然后两个选择器的相应CSS代码如下所示：


p：n个子（2）{颜色：红色；}



p：n类型（2）{颜色：红色；}


在这个例子中，两个选择器的效果是一致的，第二个p标记的文本变成红色：


虽然以上两个演示的最终结果是一致的，但是两个选择器之间有区别。

因为：在简单的白话中，n个子选择器意味着选择一个元素：

1。这是一个段落元素

2。这是父标签的第二个子元素。

对于：类型选择器的第n个，这意味着选择一个元素：

1、选择父标签的Lazi第二元素

通过对上述示例稍加修改，我们可以看到两个选择器之间的区别，如下所示：HTML代码：



我是普通的div标签
我是第一个P标签
我是第二个P标签



或与上述示例一致的CSS测试代码：


p：n个子（2）{颜色：红色；}






p：n类型（2）{颜色：红色；}



此时两个选择器呈现的结果是不同的。

P：nth-child（2）其渲染的结果不是第二P标签文本脸红了，但第一个标签，这是父标签的第二个孩子。

P：n型（2）看起来很强壮，也染红了二P标签，他们想渲染。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。