如何使用CSS选择特定类的第一个实例？

这个问题我之前也碰到过！你踩的坑很典型：.line:first-child、.line:first-of-type这类伪类选择器，都是相对于元素的直接父元素来判断“第一个”的。而你的每个.line元素都是它所在的.col-12容器的第一个子元素，所以这些选择器会把所有.line都选中，达不到你要的效果。

下面给你几个适配不同场景的解决方案：

方法1：基于现有结构精准定位（最推荐） #

根据你提供的HTML结构，第一个.line刚好在第一个.container.sticky-top容器里，直接定位这个祖先容器再选中内部的.line就可以了：

.container.sticky-top:first-of-type .line {
  /* 在这里写你的样式，比如： */
  border-bottom: 2px solid blue;
}

这个方法完全贴合你的结构，不会误选其他元素，稳定性最高。

方法2：全局范围内选中第一个.line（通用场景） #

如果你的页面结构可能变化，需要更通用的方式选中整个页面中第一个出现的.line，可以使用:has选择器（现代浏览器都支持）：

:root:has(.line) .line:first-of-type {
  /* 你的样式 */
}

它会先确认页面中存在.line元素，然后选中第一个出现的那个。

方法3：JavaScript辅助（兼容旧浏览器） #

如果需要兼容IE这类旧浏览器，或者结构太复杂不好用CSS定位，用JS选中第一个.line非常简单：

const firstLineElement = document.querySelector('.line');
if (firstLineElement) {
  // 给第一个.line添加样式或进行其他操作
  firstLineElement.style.backgroundColor = '#f0f0f0';
}

document.querySelector('.line')本身就只会返回页面中匹配的第一个元素，完美符合你的需求。

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