Bootstrap 4 DataTable CSS修改：如何自定义搜索栏与Excel按钮样式

碰到改不动搜索栏、Excel按钮样式的情况，本质是三个常见问题：

• 自定义选择器的特异性比DataTables/Bootstrap的官方样式低，写的样式直接被官方规则覆盖
• 自定义CSS的引入顺序不对，排在了官方样式的前面，优先级天然更低
• 靠记忆写选择器，没对准组件动态渲染出来的真实DOM节点，根本选不中要修改的元素

1. 先确认要修改的元素的真实DOM类名
   • 组件自带的搜索栏，外层容器类是dataTables_filter，内部的输入框继承了Bootstrap的form-control类
   • Excel导出按钮属于按钮组dt-buttons的子元素，专属类是buttons-excel
   • 实际操作时直接F12打开元素选择器，点到你要改的位置，把真实类名复制下来当选择器，不要靠记忆猜类名
2. 拉满样式优先级，确保不被官方样式覆盖
   • 写自定义选择器的时候，把DataTables的专属类拼进去抬升特异性，比如不要只写input，要写div.dataTables_filter input，这种选择器的权重比官方默认的样式选择器更高，不会被覆盖
   • 把自定义CSS文件的引入顺序放在所有官方样式的后面，正确引入顺序为：Bootstrap核心样式 → DataTables核心样式 → DataTables Bootstrap4适配样式 → 你的自定义样式，顺序错了不管选择器优先级多高都会被覆盖
   • 不要一上来就给所有属性加!important，只有碰到Bootstrap内联动态样式压不住的场景，再针对单条属性加，避免后续样式维护混乱
3. 对应元素的可参考样式代码
   • 搜索栏样式调整示例：

   div.dataTables_filter {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   div.dataTables_filter input.form-control {
     width: 240px;
     border-radius: 6px;
     border: 1px solid #e5e7eb;
     padding: 6px 12px;
   }
   

   • Excel按钮样式调整示例：

   div.dt-buttons .buttons-excel {
     background-color: #10b981;
     color: #fff;
     border-radius: 6px;
     border: none;
     padding: 6px 12px;
   }
   div.dt-buttons .buttons-excel:hover {
     background-color: #059669;
     color: #fff;
   }
   

4. 布局调整直接靠初始化配置，别硬挪元素
   如果要实现搜索栏和Excel按钮横向并排的布局，不用写定位、margin这类CSS硬挪元素，直接在DataTables初始化的时候调整dom配置就行：

   $('#你的表格ID').DataTable({
     // 把按钮组(B)和搜索栏(f)放到同一个flex容器里横向排列
     dom: '<"d-flex justify-content-between align-items-center mb-3"Bf>rtip',
     buttons: ['excel']
   })
   

单页应用场景注意：
如果是在Vue、React这类框架里使用，不要把针对DataTables的自定义样式写在带scoped的style标签里，scoped样式会自动加属性选择器，选不中DataTables动态渲染出来的DOM元素，要把这部分样式抽到全局CSS文件里

不要直接修改DataTables的核心类名，只通过自定义选择器叠加样式，后续升级库版本的时候不会因为DOM结构改动出现样式失效的问题

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