CSS Grid中:nth-child选择器异常：为何选中所有元素而非目标元素？

你的问题出在选择器的写法上：.grid :nth-child(1)里的空格是后代选择器，它会匹配.grid容器下所有层级中的第一个子元素，而非.grid的直接第一个子元素。举个例子，如果你的HTML结构是：

<div class="grid">
  <div>子元素1 <span>文本</span></div>
  <div>子元素2 <p>文本</p></div>
</div>

这个选择器不仅会命中.grid的第一个子<div>，还会命中第一个<div>里的<span>（它是父<div>的第一个子元素）、第二个<div>里的<p>（它是父<div>的第一个子元素），最终导致大量元素被选中。

修复方法 #

使用**子选择器（>）**来限定只选中.grid的直接子元素，修正后的代码如下：

.grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 100%;
}

/* 选中.grid的直接第一个子元素 */
.grid > :nth-child(1){
    font-weight: bold;
}

/* 选中.grid的直接第二个子元素 */
.grid > :nth-child(2){
    font-weight: normal;
}

你也可以用更直观的:first-child选择器替代:nth-child(1)，效果完全相同：

.grid > :first-child {
    font-weight: bold;
}

如果.grid的子元素都是同一类型（比如全部是<div>），还可以写成.grid > div:nth-child(1)，进一步提升选择器的精准度。

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