3个名称相似的CSS类共存时其中一个无法正常生效问题排查求助

1 优先修正CSS语法错误 #

你当前代码中所有rgba()属性的第四个参数（透明度通道）为非法值：

• rgba的透明度合法取值范围为0~1之间的小数，0代表完全透明，1代表完全不透明，你填写的10超出合法范围，属于无效属性值。
  虽然单属性非法不会直接导致整个类被移除，但该错误会导致对应背景色、边框色属性不生效，需要优先修正。

2 排查CSS类被完全移除的问题 #

按以下步骤逐一排查：

• 第一步：直接访问Flask提供的CSS静态文件直链（通常路径为/static/[你的CSS文件路径]），在浏览器中直接打开查看三个类是否完整存在：
  • 如果直链打开就缺少对应类：说明问题出在Flask侧，要么是你本地修改后的CSS文件未正确保存，要么是静态资源被缓存，未加载最新版本。开发阶段可以在Flask配置中添加SEND_FILE_MAX_AGE_DEFAULT = 0关闭静态资源缓存，同时清空浏览器缓存后重试。
  • 如果直链打开三个类都完整：说明问题出在浏览器侧，要么是你安装的广告拦截、样式修改类扩展篡改了CSS内容，要么是CSS文件中在丢失类的上方存在未闭合的大括号、遗漏分号等语法错误，导致后续所有CSS内容被浏览器忽略。你可以尝试把丢失的类挪到CSS文件最顶部，验证是否是前置语法错误导致的内容截断。

修正后的合法CSS代码 #

.alert_success{                                                                 
    margin: auto;                                                               
    background-color: rgba(30,77,42,1);                                        
    border-radius: 4px;                                                         
    height: 50px;                                                               
    width: 45%;                                                                 
    border: 1px solid rgba(60,120,73,1);                                       
    margin-top: 20px;                                                           
}                                                                               

.alert_failed{                                                                  
    margin: auto;                                                               
    background-color: rgba(80,20,42,1);                                        
    border-radius: 4px;                                                         
    height: 50px;                                                               
    width: 45%;                                                                 
    border: 1px solid rgba(110,53,53,1);                                       
    margin-top: 20px;                                                           
}                                                                               

.alert_info{                                                                    
    margin: auto;                                                               
    background-color: rgba(60,65,100,1);                                       
    border-radius: 4px;                                                         
    height: 50px;                                                               
    width: 45%;                                                                 
    border: 1px solid rgba(53,53,110,1);                                       
    margin-top: 20px;                                                           
}

内容的提问来源于stack exchange，提问作者User-92