如何同时定位有序列表<ol>的多个类以统一设置样式？

首先，你第一个写法 ol.class1, ol.class2, ol.class3, ol.class4 本身是正确的，能同时选中带这四个类的 <ol> 元素。响应式失效大概率不是选择器的问题，而是你没把计数器的尺寸样式写对位置——毕竟CSS计数器的数字样式通常是通过 li::before 伪元素来定义的，直接给 <ol> 设置字体大小不会影响计数器数字。

比如你应该这么写媒体查询：

/* 小屏幕下统一调整计数器数字大小 */
@media (max-width: 768px) {
  ol.class1 li::before, 
  ol.class2 li::before, 
  ol.class3 li::before, 
  ol.class4 li::before {
    font-size: 12px; /* 小屏幕尺寸 */
  }
}

而你尝试的第二个写法 ol > .class1, .class2, .class3, .class4 完全错误，它的含义是：选中 <ol> 的直接子元素中带 class1 的元素，再加上全局所有带 class2/class3/class4 的元素，根本没选中带这些类的 <ol>，自然无效。

更精简的优化方案 #

为了彻底减少重复代码，建议给所有需要统一响应式的 <ol> 加一个公共类（比如 custom-counter），再保留各自的差异化类：

<ol class="custom-counter class1">...</ol>
<ol class="custom-counter class2">...</ol>
<ol class="custom-counter class3">...</ol>
<ol class="custom-counter class4">...</ol>

然后CSS可以这么写：

/* 统一计数器基础样式 */
ol.custom-counter {
  list-style: none;
  counter-reset: list-counter;
}
ol.custom-counter li {
  counter-increment: list-counter;
  position: relative;
}
ol.custom-counter li::before {
  content: counter(list-counter);
  font-size: 16px; /* 默认大屏尺寸 */
  /* 其他公共样式：比如位置、颜色基准等 */
}

/* 各类的差异化样式 */
ol.class1 li::before {
  color: #f00;
}
ol.class2 li::before {
  color: #00f;
}

/* 响应式统一调整 */
@media (max-width: 768px) {
  ol.custom-counter li::before {
    font-size: 12px;
  }
}

这样只需要写一次公共类的响应式样式，完全避免重复代码。

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