能否在CSS的nth-child选择器中使用含vw变量的表达式？

先给你明确结论：你尝试的div:nth-child(1n + ((.0068*100vw)+.78)){display:none}这种写法完全行不通。

原因很简单：CSS的:nth-child()系列选择器只接受整数常量或者**n的线性整数表达式**（比如2n+1、3n-2这类，系数和偏移量必须是整数），不支持vw这类依赖视窗的动态计算值，也没法解析运行时的动态表达式。选择器的匹配是在页面布局前就完成的，根本拿不到布局阶段才会计算的视窗尺寸。

那不用写一堆媒体查询，怎么实现随视窗宽度动态控制显示的子元素数量？推荐这几个实用方法：

• CSS Grid自动适配方案
  如果你的子元素是固定宽度，用Grid的auto-fit+minmax()就能让容器自动根据视窗宽度调整一行能放下的元素数量，再通过限制容器高度+overflow:hidden隐藏超出的元素。示例：

  .parent {
    display: grid;
    /* 每个子元素最小150px，自动填充剩余空间 */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* 限制容器高度为一行的高度，超出的直接隐藏 */
    height: 50px;
    overflow: hidden;
  }
  

  这个方案兼容性好，不用写任何媒体查询，完全靠Grid的自动布局实现。

• CSS变量+取整计算（限现代浏览器）
  虽然:nth-child()不能直接用动态表达式，但可以先通过CSS变量计算出取整后的隐藏起始位置，再传给选择器（注意部分旧浏览器不支持）：

  .parent {
    /* 计算要保留的元素数量，用clamp限制范围，round取整为整数 */
    --keep-count: clamp(2, round(calc(0.0068 * 100vw + 0.78)), 10);
    /* 要隐藏的元素从第keep-count+1个开始 */
    --hide-start: calc(var(--keep-count) + 1);
  }
  /* 仅现代浏览器支持变量在nth-child中使用 */
  .parent > div:nth-child(1n + var(--hide-start)) {
    display: none;
  }
  

  这个方案能精准匹配你想要的线性表达式逻辑，但要注意浏览器兼容性。

• 容器查询替代媒体查询
  如果你的布局是基于组件容器的宽度而非全局视窗，用容器查询（Container Queries）能比媒体查询更精准地控制显示，减少冗余的断点：

  .parent {
    /* 声明容器为内联尺寸容器 */
    container-type: inline-size;
  }
  /* 当容器宽度小于600px时，隐藏第4个及以后的元素 */
  @container (max-width: 600px) {
    .parent > div:nth-child(4n + 1) {
      display: none;
    }
  }
  /* 当容器宽度小于400px时，隐藏第3个及以后的元素 */
  @container (max-width: 400px) {
    .parent > div:nth-child(3n + 1) {
      display: none;
    }
  }
  

  容器查询能让组件根据自身所在容器的尺寸适配，比全局媒体查询更灵活。

总结：直接在:nth-child()里写vw表达式是走不通的，但通过上面这些CSS方案，不用写一堆媒体查询也能实现你要的动态控制效果。

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