如何在CSS中选择数值型data属性值处于指定范围内的元素

原生CSS目前不存在你所说的区间简写语法，属性选择器仅支持精确匹配、前缀/后缀/包含匹配，不支持数值区间判断，也没有内置正则匹配的能力。你示例中的div[data-content="2-6"]仅会匹配data-content属性值恰好为字符串2-6的元素，无法匹配数值在2到6区间的元素。

方案1：精简属性选择器（仅适用于个位数场景） #

如果你的data-content值都是个位数，可以用前缀匹配简化写法：

div[data-content^="2"],
div[data-content^="3"],
div[data-content^="4"],
div[data-content^="5"],
div[data-content^="6"] {
  display: none;
}

注意：该方案会匹配到12、21这类以对应数字开头的多位数，仅适合属性值都是个位数的场景。

方案2：使用CSS预处理器自动生成选择器 #

如果你用Sass、LESS等预处理器，可以用循环语法批量生成选择器，无需手动逐个列举。
以Sass为例，写法如下：

// 只要修改起止数值2和6即可调整区间
@for $i from 2 through 6 {
  div[data-content="#{$i}"] {
    display: none;
  }
}

预处理器编译后会自动生成你之前手动书写的全量选择器代码，维护成本很低。

方案3：JavaScript动态匹配（适用所有场景） #

如果需要动态调整区间、或者属性值是多位数，最灵活的方式是用JS做数值判断：

const targetDivs = document.querySelectorAll('div[data-content]');
targetDivs.forEach(item => {
  const contentVal = Number(item.dataset.content);
  // 匹配2-6区间
  if (contentVal >= 2 && contentVal <= 6) {
    // 直接设置样式
    item.style.display = 'none';
    // 更推荐的做法是加类，样式交给CSS控制：item.classList.add('content-hide')
  }
})

如果用加类的方式，配套CSS写法：

.content-hide {
  display: none;
}

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