[分享]css取div下的第几个标签

在使用CSS进行网页布局时，有时需要取得一个div下的特定标签，例如取得第二个p标签的样式。这时可以使用CSS中的伪类选择器:nthchild来实现。div p:nthchild(2) { / 样式代...

在使用CSS进行网页布局时，有时需要取得一个div下的特定标签，例如取得第二个p标签的样式。这时可以使用CSS中的伪类选择器:nth-child来实现。

div p:nth-child(2) {
  /* 样式代码 */
} 

上述代码表示选取第二个在div下的p标签，可以将样式代码放入大括号内，这样只有第二个p标签会受到样式的影响。如果要选取其他标签，只需要将选择器中的2改为相应数字即可。

需要注意的是，nth-child选择器会选取div下所有类型为p的子元素，然后按照在div中的位置进行排序，再选择第二个。

另外，如果需要选取的标签不是直接的子元素，而是在子元素的子元素中，可以使用:nth-of-type选择器。例如需选取div中第二个class为red的p标签：

div p.red:nth-of-type(2) {
  /* 样式代码 */
} 

需要注意的是，nth-of-type只会选取与选择器相符的元素，而不会将所有子元素排列后再选择。