CSS如何匹配任意后缀的section-number-x格式类名？

你可以直接使用CSS属性选择器实现类名前缀匹配，不需要为每个数字单独写规则，兼容所有现代浏览器：

/* 通用匹配所有section-number-开头的类名 */
[class^="section-number-"],
[class*=" section-number-"] {
  /* 在这里写你要设置的样式，以下为示例 */
  color: #555;
  padding-right: 4px;
  font-weight: 500;
}

规则说明 #

• [class^="section-number-"] 匹配class属性以section-number-为开头的元素，适用于该类是元素第一个类的场景
• [class*=" section-number-"] 匹配class属性中包含「空格+section-number-」的元素，适用于该类前面还存在其他类名的场景
  两种规则组合使用可以覆盖所有可能的类名排序情况，不会出现误匹配。

如果你使用Sass等预处理器，也可以用循环生成规则，但需要提前确定数字的最大取值范围，灵活度不如属性选择器：

// 最多匹配到section-number-10，可按需调整上限
@for $i from 1 through 10 {
  .section-number-#{$i} {
    // 你的样式
  }
}

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