在HTML文档里，我们经常会遇到这样的需求：某个容器下面挂着若干个带有item类的子元素，而我们只想给其中的第一个施加样式或者做逻辑处理。表面上看，似乎写个.item:first-child就能解决，但实际渲染时往往发现样式根本没有生效。这背后的核心原因，是CSS规范中“位置伪类”的匹配逻辑和class选择器之间是独立判断的。
为什么.item:first-child经常失效
首先需要厘清一个基本概念：:first-child是一个结构性伪类，它只关心元素在父节点下的位置，而不关心该元素是否带有某个类。当浏览器解析.item:first-child时，它会拆成两步判断，第一步找父元素下第一个子元素，第二步检查这个子元素是否同时拥有item类。只有两者同时满足，选择器才命中。
来看一段常见的错误结构。假设容器里先放了一个标题，再放了一组item：
<div class="box"> <h3>列表标题</h3> <div class="item">第一项</div> <div class="item">第二项</div> </div>
此时如果写.box .item:first-child，由于第一个子元素是h3而不是div.item，所以没有任何item会被选中。很多初学者误以为“带item类的第一个”就会被选中，这是对伪类语义的典型误解。
可靠的CSS定位方案
如果HTML结构相对固定，且item元素都是同一标签（比如都是div），可以利用:nth-of-type来按标签类型计位。它会在同标签兄弟中数位置，再叠加类限制：
/* 选中box内第一个div且带item类的元素 */
.box > div.item:nth-of-type(1) {
color: red;
}
不过nth-of-type仍然以标签为基准。如果item可能是li、section混用，上述写法就会漏选。更通用的纯CSS办法是使用:not()排除法：选中所有item，但排除掉前面还有item兄弟的那些。
/* 选中前面没有同级item的元素，即第一个item */
.box > .item:not(.item ~ .item) {
border: 1px solid blue;
}
这段规则的意思是：先找到.box下的.item，然后过滤掉那些“存在前面的兄弟节点也带item类”的元素。剩下的就是第一个出现的item。这种写法不依赖标签类型，适应性最强，但在非常深的嵌套里可读性稍差。
用JavaScript做确定性获取
当样式方案受限于结构复杂度时，用脚本拿第一个匹配项最直观。querySelector本身就会返回文档中第一个符合选择器的元素，不需要额外位置伪类：
// 获取box内第一个类名为item的子元素
const firstItem = document.querySelector('.box .item');
if (firstItem) {
firstItem.classList.add('active');
}
这种方式的优点是语义清晰，不受DOM中其他标签干扰。缺点是要操作DOM，纯静态页面或追求样式分离的项目可能不愿引入脚本。实际工程中，如果仅仅是样式控制，推荐优先用:not()方案；如果涉及交互状态切换，再用JS辅助。
方案对比与选用建议
我们把三种常见思路放在一张表里比较：
| 方法 | 是否依赖标签 | 兼容性 | 适用场景 |
|---|---|---|---|
| .item:first-child | 否（但要求真的是首子节点） | 全平台 | item确为父级第一个子元素 |
| 标签.item:nth-of-type(1) | 是 | IE9+ | item标签统一 |
| .item:not(.item ~ .item) | 否 | IE9+ | 结构复杂、标签混杂 |
从维护成本看，:not()兄弟选择器虽然初看绕口，但一旦写成公共样式类，后续无论产品怎么往容器前插提示条、按钮，都不会破坏“第一个item”的命中。建议在组件库开发中形成约定，避免依赖脆弱的:first-child。
小结与编码注意
回到问题本身，在HTML结构中通过CSS定位第一个类名为item的子元素，关键不在于“第一个”这三个字怎么写，而在于理解伪类只认位置不认类的机制。若结构可控，用nth-of-type简单明了；若结构不可控，用:not()兄弟排除最稳。写HTML时也要注意，在文章或教程里提及标签名应当转义，例如写<div>而非真实标签，避免被浏览器误解析。
最后给出一段完整可测的演示，把前面说的结构、样式和脚本放在一起：
<style>
.box > .item:not(.item ~ .item) {
background: #eef;
}
</style>
<div class="box">
<p>说明文字</p>
<div class="item">第一个item</div>
<div class="item">第二个item</div>
</div>
<script>
const el = document.querySelector('.box .item');
console.log(el.textContent);
</script>
运行后只有“第一个item”带上浅蓝背景，控制台也正确打印出它，说明纯CSS与JS两条路径在此场景下都精准命中了目标节点。
CSS_selectorHTML_structurefirst_child修改时间：2026-08-08 03:03:30