如何用CSS选择器仅为结构中首个.line类元素设样式？现有写法是否有误？

嘿，你的现有选择器确实存在明显问题，完全达不到“为第一个.line元素应用样式”的目的，我来拆解下原因和可行的解决办法：

为什么原选择器不生效？ #

你的选择器是 .headercontainer .line > *:first-child，它的作用是匹配所有.line元素的直接子元素中的第一个，但看你的DOM结构，两个.line都是空的<div class="line"></div>——没有任何子元素，所以这个选择器根本匹配不到任何元素，自然不会有样式生效。
退一步说，就算.line里面有子元素，这个选择器也会选中所有.line的第一个子元素，而不是只针对第一个.line本身，这也不符合你的需求。

可行解决方案 #

根据你的需求（仅给第一个.line元素加样式），这里有两种常用的可靠方案：

方案1：直接选中第一个.line元素（最推荐）

用:first-of-type选择器，它会精准匹配父容器下第一个类为line的div元素，哪怕后续DOM结构调整（比如新增其他类型的元素），也不会影响匹配：

.headercontainer .line:first-of-type {
  border: 3px solid yellow;
}

如果你确定第一个.line在父容器中的位置固定（比如是第二个子元素），也可以用:nth-child()：

/* 因为第一个.line是.headercontainer的第2个子元素 */
.headercontainer .line:nth-child(2) {
  border: 3px solid yellow;
}

小提示：:first-of-type比:nth-child()更鲁棒，因为它不依赖元素在父容器中的位置顺序，更适合后续可能的DOM变动。

方案2：如果需求是给第一个.line的子元素加样式

要是你原本的需求其实是给第一个.line里面的第一个子元素加样式（比如后续.line会填充内容），那就要先定位到第一个.line，再选择它的子元素：

.headercontainer .line:first-of-type > *:first-child {
  border: 3px solid yellow;
}

这样就只会选中第一个.line的第一个直接子元素，不会影响其他.line的内容。

验证效果 #

把方案1的代码放到你的项目里，第一个<div class="line"></div>会显示黄色边框，第二个.line则没有，完全符合你的需求。

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