解决同时引入bootstrap样式与layui样式导致layui部分样式被覆盖的问题

问题1：

网页整体布局用的是bootstrap3的样式，但同时使用了layui的数据表格来进行表格数据的展示，导致layui的表格中的按钮字体颜色被bootstrap的样式覆盖。
错误样式如下图（操作栏的按钮图标）：

解决方法：

方法1：layui.table回调覆盖

在 layui 表格数据加载的回调方法中(table.render中的done()方法)，通过 jquery类选择器，重新设置其字体颜色：

$(".layui-table-col-special a").addClass("barColor");//覆盖bootstrap样式

方法2：覆写bootstrap的样式

• 覆盖影响的bootstrap样式
• 这里通过chrome浏览器查看到是bootstrap中的以下样式覆盖了layui的样式：

a:not([href]):not([tabindex]) {
     
    color: inherit;
    text-decoration: none;
}

• 于是可以在页面中重写该样式：

        a:not([href]):not([tabindex]) {
     
            color: #fff;;
            text-decoration: none;
        }

问题2

经过重写或覆盖后，表格的样式没错了，但当使用layer弹框时，发现按钮样式仍然被bootstrap该样式覆盖。

如上图，确定按钮应该为白色，但仍然显示为黑色，还是由于bootstrap样式覆盖

解决办法

利用layer 的skin属性，将layer的标签提取出来，重新定义样式

1. 先定义相应覆盖样式：

  /*按钮的class是通过浏览器的查看元素功能知道的*/
        body .demo-class .layui-layer-btn0{
     
            color: #fff;
        }
        body .demo-class .layui-layer-btn1{
     
           color: #333;
        }

2. 在调用弹出框时指定 skin

layer.confirm('确认审核通过吗？',{
     icon: 1, title:'确认提示',
                        skin: 'demo-class',//skin属性可以将layer的标签提取出来，重新定义样式
                         }, function(index){
     
                        layer.close(index);
                    });

• 此时弹窗按钮显示正常:
  

参考：
弹层组件文档 - layui.layer

https://blog.csdn.net/qq_36470789/article/details/78238402