解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题 按钮颜色字体为灰色而不是黑色 模糊看不清楚 important使提升优先级 提升权重

本文主要是介绍解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题 按钮颜色字体为灰色而不是黑色 模糊看不清楚 important使提升优先级 提升权重，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

解决方法：

新增只的css文件 custom-qyj.css

引入

<link rel="stylesheet" href="/jslib/ga/custom-qyj.css"/>

/*!
like12 add,20211125
解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题(reboot.scss的“color: inherit”导致layer强行继承了bootstrap的color)
加!important使提升至最高优先级
*/
.layui-layer-btn .layui-layer-btn0 {border-color: #1E9FFF;background-color: #1E9FFF;color: #fff !important;
}
.layui-layer-btn a {height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;background-color: #fff;color: #333 !important;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;
}

问题现象：

解决后：

 审查元素

 

 参考：

提高css样式的权重，优先展示 - qcjdp - 博客园

CSS的!important属性修改权重_05431的博客-CSDN博客

 

这篇关于解决layer.css与bootstrap.min.css冲突 按钮颜色失真的问题 按钮颜色字体为灰色而不是黑色 模糊看不清楚 important使提升优先级 提升权重的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---