如何DRY化CSS规则？能否仅用一个.active选择器实现等价规则集？

嘿，这个问题问到点子上了！咱们先聊聊CSS的DRY优化思路，再解决那个选择器的简化问题～

日常写CSS最容易犯的就是重复写相同样式，这里有几个实用的优化方向：

• 用CSS变量抽离重复值：把重复出现的颜色、间距、字号这些属性值定义成全局或局部变量，比如：

  :root {
    --white-color: #ffffff;
    --spacing-sm: 8px;
  }
  

  之后需要用到的地方直接用var(--white-color)调用，后续要修改只需要改变量定义的地方，不用挨个找代码替换。

• 借助CSS预处理器的特性：像Sass、Less这类工具的嵌套、混合宏（Mixin）、继承功能简直是DRY神器。比如重复的按钮样式可以写个Mixin：

  @mixin button-style {
    padding: var(--spacing-sm);
    border-radius: 4px;
  }
  

  需要的地方用@include button-style;引入就行；如果是多个选择器共享同一套样式，用@extend继承也能减少重复代码。

• 合并重复的选择器组：如果多个选择器有完全相同的样式，就把它们用逗号分隔合并成一组，就像你给出的例子那样，避免重复写相同的属性块。

• 使用通用工具类：把常用的基础样式做成通用类，比如.text-center（文字居中）、.mb-8（底部外边距8px），直接在HTML元素上添加这些类，不用每次都写重复的CSS规则。

• 利用CSS的继承特性：像字体、文字颜色这类可继承的属性，直接给父元素设置，子元素就能自动继承，不用在每个子元素上重复写。

• 用现代布局工具减少冗余：CSS Grid和Flexbox能帮你用更少的代码实现复杂布局，告别过去用float、position写出来的一堆冗余布局代码。

其实你给出的原规则已经只使用了一个.active选择器啦，不过如果是想让选择器的写法更简洁、更DRY，这里有几种等价的实现方式：

方式1：使用属性选择器匹配ID后缀 #

如果这些ID都是以select结尾的，可以用属性选择器[id$="select"]来匹配，代码如下：

.active [id$="select"] { color: white; }

⚠️ 注意：这个写法会匹配所有.active容器下ID以select结尾的元素，要是页面里还有其他类似ID的元素，会被误匹配，所以要确保只有目标元素符合这个规则哦。

方式2：给目标元素添加共同类名（更稳妥） #

给#pselect、#bselect这些元素都加上一个共同的类名，比如.select-item，然后就可以用更简洁的选择器：

.active .select-item { color: white; }

这种方式不会有误匹配的风险，也是最推荐的DRY写法，后续如果要新增类似元素，只要加个类就行，不用修改CSS。

方式3：结合标签选择器（更精准） #

如果这些元素都是同一类型的标签（比如都是<button>），可以结合标签选择器进一步缩小范围：

.active button[id$="select"] { color: white; }

适合需要精准匹配特定标签的场景。

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