为什么nth-of-type()和nth-child()与不相关的元素断开

nth-of-type()和nth-child()是CSS选择器中用于选择特定位置的元素的伪类。它们可以根据元素在其父元素中的位置来选择元素。

nth-of-type()选择器会选择父元素中特定类型的元素中的第n个元素。它的语法是：nth-of-type(n)。其中，n可以是一个具体的数字，也可以是关键词odd（奇数）或even（偶数）。

nth-child()选择器会选择父元素中的所有子元素中的第n个元素。它的语法是：nth-child(n)。同样，n可以是一个具体的数字，也可以是关键词odd或even。

这两个选择器与不相关的元素断开是因为它们只会选择与它们所应用的元素类型相匹配的元素。如果在父元素中存在其他类型的元素，这些选择器不会考虑这些元素的位置。

举个例子来说明，假设有以下HTML结构：

<div>
  <p>第一个段落</p>
  <span>一个span元素</span>
  <p>第二个段落</p>
  <span>另一个span元素</span>
</div>

如果我们使用nth-of-type(2)选择器，它会选择父元素中第二个类型为p的元素，即第二个段落。而不会选择第二个span元素，因为它的类型与选择器不匹配。

同样地，如果我们使用nth-child(2)选择器，它会选择父元素中的第二个子元素，即第一个span元素。而不会选择第二个段落，因为它的类型与选择器不匹配。

综上所述，nth-of-type()和nth-child()选择器与不相关的元素断开是因为它们只选择与它们所应用的元素类型相匹配的元素，而不考虑其他类型的元素。