CSS nth-of-type选择器部分失效及类适配问题咨询

一、为什么:nth-of-type(4)、:nth-of-type(5) 失效？ #

问题出在CSS语法错误上：

• .outsideNumber:nth-of-type(3) 和 .outsideNumber:nth-of-type(4) 的代码块结束后多了一个分号（};），CSS规则块的正确结束格式只有大括号（}）。
• 多余的分号会打乱浏览器的CSS解析逻辑，导致后续的.outsideNumber:nth-of-type(4)和.outsideNumber:nth-of-type(5)规则被直接忽略，因此无法生效。
• 当你禁用:nth-of-type(2)的样式后，浏览器可能会对前面的错误做容错处理，但:nth-of-type(4)后面的错误分号依然会影响:nth-of-type(5)的解析，所以最后一个规则还是失效。

修复方法：删掉这两个多余的分号即可，修正后的代码片段如下：

.outsideNumber:nth-of-type(3){
  width: 1px;
  background-color: yellow;
  transform: translate(-50%,-50%) rotate(60deg);
}

.outsideNumber:nth-of-type(4){
  width: 1px;
  background-color: green;
  transform: translate(-50%,-50%) rotate(90deg);
}

二、nth-of-type 是否支持类选择？ #

首先明确：nth-of-type不是按类的数量来计数的，它的工作逻辑是两步走：

1. 先在父元素的所有兄弟节点中，筛选出和目标元素同类型的元素（比如你的例子里都是<div>），按出现顺序排序。
2. 再从这些同类型元素中，选出第N个，并且这个元素要匹配前面的类选择器（比如.outsideNumber）。

你的例子中，父元素#insideCircle下的所有子元素都是带.outsideNumber类的<div>，所以第2个<div>刚好符合类匹配条件，因此.outsideNumber:nth-of-type(2)能生效。

如果父元素里存在不带该类的同类型元素，比如：

<div id="insideCircle">
  <div class="outsideNumber"></div>
  <div></div> <!-- 不带类的div -->
  <div class="outsideNumber"></div>
</div>

这时.outsideNumber:nth-of-type(2)不会选中第三个元素，因为父元素下的第2个<div>不带.outsideNumber类；而.outsideNumber:nth-of-type(3)会选中第三个元素，因为它是父元素下的第3个<div>且带类。

那些说“nth-of-type仅能选择HTML标签”的文档表述不准确——它确实基于元素类型计数，但可以结合类选择器进一步过滤符合条件的元素。

内容的提问来源于stack exchange，提问作者M0NST3R_ACA