nth-child()与nth-of-type()区别

来源：互联网发布：cmd连不上mysql 编辑：程序博客网时间：2024/05/16 11:24

nth-child()与nth-of-type()都是css3选择器，那么两者有什么区别呢？

例如

p:nth-child(n)

表示选取父元素的下的第n个元素，且这个元素必须是p元素，如果父元素下第n个元素不是p元素。则该选择器将匹配失败。

第n个元素复合的情况下

<!DOCTYPE html><html><head><style> .test p:nth-child(3){background:#ff0000;}</style></head><body><div class='test'><p>第一个元素： p。</p><p>第二个元素： p。</p><p>第三个元素： p。</p><p>第四个元素 p。</p><p>第五个元素 p。</p></div></body></html>

这里写图片描述

第三个子元素不是段落的情况：

<!DOCTYPE html><html><head><style> .test p:nth-child(3){background:#ff0000;}</style></head><body><div class='test'><p>第一个元素： p。</p><p>第二个元素： p。</p><span>第三个元素： span。</span><p>第四个元素 p。</p><p>第五个元素 p。</p></div></body></html>

结果如下：
这里写图片描述

可见当其父元素下的三个元素不是p元素是，该选择器将无法选择到元素

p:nth-of-type(n)

表示选择父元素下的第n个p元素（第n个p元素,而不论第n元素是否是p元素，而p:nth-child(n)是要求第n个元素必须是p元素的）。
看代码：

<!DOCTYPE html><html><head><style> .test p:nth-of-type(3){background:#ff0000;}</style></head><body><div class='test'><p>第一个元素： p。</p><p>第二个元素： p。</p><span>第三个元素： span。</span><p>第四个元素 p。</p><p>第五个元素 p。</p></div></body></html>

结果如下：
这里写图片描述

阅读全文

0 0