定义和用法：
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
<div class="box">
<ul>
<li>1</li>
<a>2</a>
<li>2</li>
</ul>
<ul>
<li>1</li>
<a>2</a>
<li>2</li>
</ul>
</div>
现在我在这个li中加了一个a 如果你使用 nth-child的时候
它会不会出现任何样式，因为nth-child是选择第二个所以它就选择到了a标签，你前面是li:nth-child(2),所以它找不到，它找到的是a标签，就不会显示样式。
然后我们使用 li:nth-of-type(2)的时候
因为它选择的是li标签的的第二个，只会找到li第二个，不管中间有多少别的内容。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
</body>
</html>
p:nth-of-type(3n+0)
这个公式得到的结果是从p标签开始计算的，得到的结果是：
p:nth-child(3n+0)
这个公式得到的结果是从h1标签开始计算的，得到的结果是：
总结：它们两个的区别就是一个是从起头的标签开始计算，一个是当前标签是那个，就从那个标签开始计算。
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
