:first-of-type 只按元素类型匹配，忽略 class，故 .item:first-of-type 并非选所有 .item 中第一个，而是选父容器中同类型元素的第一个且带 .item 类的元素；推荐用 .item:not(.item ~ .item) 或语义化类名。
直接用 :first-of-type 配合 class 本身不会冲突，但容易“选不到”你想要的元素——根本原因不是冲突，而是它只看元素类型（如 div、p），完全忽略 class 名称。 换句话说，.item:first-of-type 的意思是：「是 .item 类且同时是其父容器中同类型（比如第一个 div）的第一个元素」，而不是「所有 .item 中的第一个」。
为什么 .item:first-of-type 常常不生效？
假设 HTML 是这样的：
<section> <h2>标题</h2> <div class="item">第一项</div> <div class="item">第二项</div> <div class="item">第三项</div> </section>
这里 .item 都是 div，而它们前面有个 h2。所以第一个 div 确实是 div:first-of-type，此时 .item:first-of-type 能命中第一个 div.item。
但如果结构变成：
立即学习“前端免费学习笔记（深入）”；
<section> <div class="header">页头</div> <div class="item">第一项</div> <div class="item">第二项</div> </section>
那么第一个 div 是 .header，第一个 .item 是第二个 div —— 它**不是** div:first-of-type，所以 .item:first-of-type 就选不到它。
真正想选「类名为 item 的第一个元素」？用 :first-child 或 :nth-of-type(1)
-
.item:first-child：选中的是「既是.item，又是其父元素的第一个子元素」的节点（要求位置必须是第 1 个） -
.item:nth-of-type(1)：和:first-of-type行为一致，只是写法更明确，仍受限于元素类型 - 更稳妥的写法其实是：
.item:nth-child(1)（如果它恰好是第 1 个子元素）或组合判断
推荐方案：用 :nth-child() 配合结构特征
如果目标是「所有带 .item 的元素里视觉/顺序上的第一个」，最可靠的方式是明确它在父容器中的位置规律。例如：
- 如果所有
.item都连续排列，且前面没有其他同类型元素 → 用.item:first-of-type可行 - 如果
.item总是从第 2 个子元素开始 → 用.item:nth-child(2) - 如果不确定位置，但知道它前面只有非
.item元素 → 可考虑 JS 动态加.item-first类，再用 CSS 控制
终极建议：别依赖 :first-of-type 选特定 class
因为它的设计初衷就是按标签类型筛选，不是为 class 设计的。实际开发中更推荐：
- 语义化添加专用类名，如
.item:first或.item.is-first - 用属性选择器配合 data 属性：
[data-item="first"] - 用 CSS 逻辑（现代）：
.item:not(.item ~ .item)—— 表示「没有其他 .item 出现在它前面」，即第一个 .item（兼容性较好，IE9+）
