引入jQuery Mobile后菜单按钮CSS颜色被覆盖的解决办法求助

我懂你的困扰——既要用jQuery Mobile的swipeleft功能，又不想它把你设置好的黑色按钮改成灰色。这本质是CSS样式优先级冲突：jQuery Mobile的默认按钮样式会覆盖你的自定义样式，下面给你几个实用的解决方案：

方案1：给按钮添加data-role="none"属性 #

jQuery Mobile有个内置特性：会自动忽略带有data-role="none"的元素，不会给它应用框架自带的样式。你只需要修改按钮标签，加上这个属性就行：

<button class="button tablinks" data-role="none" onclick="open_more(event, 'main_page')" id="defaultOpen">&nbsp;首頁</button>

这个方法最简单，完全保留你的自定义样式，同时不影响swipeleft功能的使用。

方案2：提升自定义CSS的优先级 #

如果不想改动HTML结构，可以通过增强选择器的特异性，让你的样式优先级高于jQuery Mobile的样式。比如把原来的.button选择器改成更具体的：

#mySidenav .button {
  background-color: #111;
  height: 10%;
  width: 100%;
  text-align: left;
  font-weight: bold;
  font-family:"Microsoft JhengHei",Georgia,Serif;
  color: #818181; /* 确保文字颜色也保持你设置的效果 */
}

如果还是被覆盖，可以临时用!important（尽量少用，迫不得已再用）：

.button {
  background-color: #111 !important;
  /* 其他样式保持不变 */
}

方案3：只启用需要的jQuery Mobile功能，禁用全局自动初始化 #

如果你只需要swipe触摸事件，不需要jQuery Mobile对页面其他元素（比如按钮）的样式增强，可以在引入jQuery Mobile之前，设置禁用全局自动初始化，只开启swipe相关功能：

// 这段代码要放在引入jQuery之后，jQuery Mobile之前
$(document).on("mobileinit", function() {
  // 禁止jQuery Mobile自动初始化整个页面
  $.mobile.autoInitializePage = false;
  // 只启用swipe相关的事件支持
  $.mobile.event.special.swipe.enabled = true;
  $.mobile.event.special.swipeleft.enabled = true;
  $.mobile.event.special.swiperight.enabled = true;
});

这样框架只会加载触摸事件的代码，不会给按钮、表单等元素套上它的样式，完美保留你的自定义菜单样式。

推荐优先试试方案1，操作最简单，效果最直接~

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