[分享]css3找第几个元素

CSS3提供了几种方式用于找到页面上的第n个元素。以下是介绍几种方法的示例代码。/ 找到ul下的第3个li元素 / ul li:nthchild(3) {} / 找到类名为item的元素下的第5个p元...

CSS3提供了几种方式用于找到页面上的第n个元素。以下是介绍几种方法的示例代码。

/* 找到ul下的第3个li元素 */
ul li:nth-child(3) {}

/* 找到类名为item的元素下的第5个p元素 */
.item p:nth-of-type(5) {}

/* 找到第3个p元素 */
p:nth-child(3) {}

/* 找到页面上的第2个div元素 */
div:nth-of-type(2) {} 

上述示例中，使用了nth-child和nth-of-type两种伪类选择器。nth-child可以选择父元素下的第n个子元素，而nth-of-type可以选择指定类型的元素中的第n个元素。需要注意的是，这两种选择器的计数从1开始。

此外，如果要选择一个元素下的所有子元素中的第n个元素，可以使用:nth-child(n)或:nth-of-type(n)。

比如，下面的示例选择了id为wrapper的元素下所有子元素中的第4个p元素：

/* 选择id为wrapper的元素下所有子元素中的第4个p元素 */
#wrapper *:nth-of-type(4) {} 

需要注意的是，如果要选择类名为item的元素的第n个p元素，则必须使用:nth-of-type选择器。因为.item p:nth-child(n)会选择.item元素下的所有子元素中的第n个p元素，而不是类名为item的元素下的第n个p元素。