如何在CSS中选中.outer类下的首个.inner后代元素？

需要定位.outer类的后代元素中的首个.inner类元素（该元素并非.outer的直接第一个子元素）。在.outer内部的首个.inner出现前，可能存在任意数量、任意嵌套层级的元素，且首个.inner之后可能多次出现.inner类元素。以下是简化后的HTML结构（包含尝试使用:nth-child()的失败方案）：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

    <style>
        .outer :nth-child(1 of .inner) {
            color:red;
        }
    </style>

</head>
<body>

<div class="outer">
    <!-- 此处可能存在任意数量的元素 -->
    <div>
        <!-- 此处可能存在任意数量的元素 -->
        <div class="inner">
            <span>Should BE affected!</span>
        </div>
    </div>
    <!-- 此处可能存在任意数量的元素 -->
    <div>
      <!-- 此处可能存在任意数量的元素 -->
      <div>
        <!-- 此处可能存在任意数量的元素 -->
        <div class="inner">
            <span>Should NOT be affected!</span>
        </div>
      </div>
    </div>
</div>

</body>
</html>

你的CSS方法哪里错了？ #

.outer :nth-child(1 of .inner) 的逻辑不符合需求：:nth-child(of .inner) 是筛选每个父元素下的第一个.inner子元素，而非整个.outer后代链里的首个.inner。示例中两个.inner都是各自父元素的第一个.inner，所以都会被选中，达不到只选第一个的效果。

可行的实现方案 #

方案1：CSS :has() 选择器（现代浏览器可用） #

如果目标浏览器支持:has()（Chrome 101+、Firefox 121+、Safari 15.4+），可以用以下写法精准选中首个.inner：

/* 先给所有.outer下的.inner设置样式 */
.outer .inner {
    color: red;
}
/* 排除第一个.inner之后的所有.inner（包括不同嵌套层级） */
.outer:has(.inner) .inner ~ * .inner,
.outer:has(.inner) .inner ~ .inner {
    color: initial;
}

原理是先给所有.inner应用样式，再将第一个.inner之后的所有同类型元素重置回默认样式。

方案2：JavaScript 方案（兼容所有浏览器） #

如果需要兼容旧浏览器，JS是最可靠的方式，querySelector会自动返回.outer内第一个匹配的.inner元素：

// 单个.outer元素的情况
const firstInner = document.querySelector('.outer .inner');
if (firstInner) {
    firstInner.style.color = 'red';
    // 推荐添加类名，方便后续样式维护
    // firstInner.classList.add('first-inner');
}

// 多个.outer元素的情况
document.querySelectorAll('.outer').forEach(outer => {
    const target = outer.querySelector('.inner');
    if (target) {
        target.classList.add('first-inner');
    }
});

添加类名后，就可以在CSS里统一定义样式：

.first-inner {
    color: red;
}

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