如何结合属性选择器为带编号的CSS类伪元素统一样式？

Hey David, nice to help you out with this! I’ve faced this exact issue when working with dynamically numbered CSS classes, so here are a few straightforward solutions that should work for you:

1. 直接结合属性选择器与伪元素（最简单的纯CSS方案） #

其实你完全可以把属性选择器和伪元素语法结合起来，不需要担心中间的编号。CSS的属性选择器会匹配包含指定字符串的类名，不管后面跟着什么数字：

/* 统一设置所有包含parentcategory类的元素的::before和::after */
[class*="parentcategory"]::before,
[class*="parentcategory"]::after {
  content: "";
  display: inline-block;
  /* 这里添加你的通用伪元素样式，比如颜色、尺寸等 */
  width: 12px;
  height: 12px;
  margin-right: 4px;
  background-color: #ccc;
}

补充细节： #

• 如果你的类名一定是以parentcategory开头（比如.parentcategory1而不是.foo-parentcategory2），可以用更精准的^=选择器代替*=，避免意外匹配其他包含该字符串的类：

  [class^="parentcategory"]::before,
  [class^="parentcategory"]::after {
    /* 样式 */
  }
  

• 如果元素有多个类，只要其中一个包含parentcategory，这个选择器就会生效，完全不受编号影响。

2. 用CSS自定义属性（变量）实现灵活统一管理 #

如果需要给不同编号的类设置差异化伪元素样式，但又想保留通用基础样式，CSS变量是绝佳选择：

/* 先给所有parentcategory类设置通用变量和基础样式 */
[class*="parentcategory"] {
  float: left;
  /* 定义伪元素的通用变量 */
  --pseudo-content: "";
  --pseudo-bg: #ccc;
  --pseudo-size: 12px;
}

/* 统一应用伪元素样式，使用变量 */
[class*="parentcategory"]::before {
  content: var(--pseudo-content);
  width: var(--pseudo-size);
  height: var(--pseudo-size);
  background-color: var(--pseudo-bg);
  margin-right: 4px;
}

/* 针对个别编号的类，只需覆盖变量即可，不用重写全部样式 */
.parentcategory3::before {
  --pseudo-content: "📌";
  --pseudo-bg: #ff4444;
}

这种方式既保证了样式的统一性，又能轻松实现个性化调整，维护起来非常方便。

3. 预处理器循环（适合使用Sass/Less的项目） #

如果你的项目使用CSS预处理器（比如Sass），可以通过循环自动生成所有带编号的伪元素选择器，省去手动写重复代码的麻烦：

/* 假设你的编号从1到10，可根据实际修改n的值 */
@for $i from 1 through 10 {
  .parentcategory#{$i}::before,
  .parentcategory#{$i}::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ccc;
  }
}

编译后会自动生成.parentcategory1::before到.parentcategory10::before的所有选择器，适合编号范围固定的场景。

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