CSS能否获取子元素数量并将结果存储为CSS变量？

首先纠正一个认知误区：JavaScript完全可以修改CSS变量，而且这是实现你需求最稳妥的方案。纯CSS本身没有提供直接查询DOM节点数量、自动给CSS变量赋值的内置能力，你预想的document(.navbar a:count)这类语法目前不属于CSS标准，没有浏览器支持。

推荐方案：JavaScript实现（通用无限制） #

实现逻辑非常简单，只需要两行核心代码就能完成计数和变量赋值：

// 统计.navbar容器下所有a标签的数量
const navItemCount = document.querySelectorAll('.navbar a').length;
// 把统计值写入全局CSS变量
document.documentElement.style.setProperty('--total-navbar-items', navItemCount);

你给出的HTML结构可以直接复用：

<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="navbar">
        <a href="index.html"> Home </a>
        <a href="index.html"> About </a>
        <a href="index.html"> Listings </a>
        <a href="index.html"> Info </a>
        <a href="index.html"> Profile </a>
    </div>
</body>

变量赋值完成后，你可以在CSS的任意位置用var(--total-navbar-items)调用这个值，做宽度均分、间距计算等操作都没问题。如果导航项是动态渲染、会增删改动，只需要在DOM更新后重新执行计数赋值逻辑即可，也可以搭配MutationObserver监听容器变动自动更新变量值。

备选方案：纯CSS实现（仅适合固定上限场景） #

如果不想引入JS，也可以通过CSS选择器的特性“倒推”元素总数，但缺点是必须提前预设元素的最大数量，超过预设值就会失效。SCSS写法参考：

// 提前配置最多支持统计10个导航项，可按需调整上限
$max-support-count: 10;
.navbar {
  --total-navbar-items: 0;
  @for $i from 1 through $max-support-count {
    // 如果存在倒数第i个a子元素，就把变量值更新为i
    > a:nth-last-child(#{$i}):first-child ~ * {
      --total-navbar-items: #{$i};
    }
  }
}

这个方案的原理是利用:nth-last-child匹配倒数位置的元素，最终命中的最大i值就是实际元素总数，仅适合导航项数量上限明确、不会大幅变动的场景。

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