使用CSS为两个progress进度条设置不同颜色时样式失效怎么办？

问题原因 #

你当前编写的CSS是Sass/Scss等CSS预处理器的嵌套语法，原生CSS默认不支持这类嵌套规则，浏览器无法识别你写的样式，导致自定义配置全部失效，进度条恢复默认样式。

解决方案 #

将嵌套选择器拆分为标准原生CSS写法即可，公共样式可以抽离复用，避免重复代码：

/* 公共通用样式 */
progress {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  width: 250px;
  height: 20px;
}
progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

/* 第一个进度条红色样式 */
.progress1 progress::-webkit-progress-value {
  background-color: #c30000;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.progress1 progress::-moz-progress-bar {
  background-color: #c30000;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

/* 第二个进度条绿色样式 */
.progress2 progress::-webkit-progress-value {
  background-color: #1eff00;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.progress2 progress::-moz-progress-bar {
  background-color: #1eff00;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

原有HTML代码无需修改，替换CSS后即可实现两个进度条分别显示红色、绿色的预期效果。

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