CSS的nth-of-type选择器原理是什么？为何示例中div选择器不生效？

• 该选择器按元素标签类型，在父元素的同类型子元素集合中，根据位置规则筛选目标元素
• 支持两种参数形式：
  • 关键字：odd（匹配奇数位置的元素）、even（匹配偶数位置的元素）
  • 公式：如2n+1（等价于odd）、3n（匹配第3、6、9…个元素），其中n从0开始递增
• 核心注意点：它只关注元素的标签类型，与类名、ID等属性无关，排序范围是父元素下所有同标签的子元素，而非仅带有指定类的元素

示例代码：

<html>
<head>
    <style>
        .red-color:nth-of-type(even) {
            color: red;
        }
        .blue-color:nth-of-type(odd) {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="red-color">text</div>
    <div class="blue-color">should be blue</div>
    <div class="red-color">should be red</div>
    <div class="blue-color">text</div>  
</body>
</html>

问题根源在于对:nth-of-type()的逻辑误解：

• 所有元素都是<div>标签，:nth-of-type()会以<body>下所有<div>的全局位置来排序，而非仅按带指定类的元素单独排序
• .red-color:nth-of-type(even)：要求是「第偶数个<div>且带.red-color类」，但示例里第2、4个<div>是.blue-color，.red-color的<div>都在奇数位置，因此无匹配元素
• .blue-color:nth-of-type(odd)：要求是「第奇数个<div>且带.blue-color类」，但示例里.blue-color的<div>都在偶数位置，同样无匹配元素

简单来说，:nth-of-type()的位置计算是基于同标签的所有子元素，不是筛选后的类元素集合。

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