如何简化序列式CSS ID选择器的写法？

你提到的#flip1-4这种写法不可行——它只会匹配id严格为flip1-4的单个元素，无法选中#flip1到#flip4这四个目标元素。下面提供几种实用的简化方案：

方案1：CSS原生属性选择器（无需工具） #

如果目标元素的id都是以flip开头，可以用属性前缀匹配选择器：

[id^="flip"] {
  color: red;
}

如果需要更精确（避免误选中其他以flip开头的id），可以结合数字后缀匹配：

[id^="flip"][id$="1"], 
[id^="flip"][id$="2"], 
[id^="flip"][id$="3"], 
[id^="flip"][id$="4"] {
  color: red;
}

方案2：使用CSS预处理器（Sass/Less） #

借助预处理器的循环功能批量生成选择器，以Sass为例：

@for $i from 1 through 4 {
  #flip#{$i} {
    color: red;
  }
}

编译后会自动生成你最初写的多选择器代码，编写效率更高。

方案3：基于DOM结构简化 #

如果这四个元素属于同一个父容器（比如<div class="flip-group">），可以直接通过父容器选择子元素：

.flip-group > div {
  color: red;
}

如果父容器下还有其他子元素，可通过:nth-child限定范围：

.flip-group > div:nth-child(-n+4) {
  color: red;
}

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