Question

我正在使用bootstrap（v3）和jquery ui（v1.11.4）开发一个网站。通常这很好，但偶尔当我使用jquery小部件（例如tab小部件）时，小部件的css优先于bootstrap css。例如：

enter image description here

有没有人有任何提示可以帮助您解决此问题？如果可能的话，我不希望jquery css覆盖bootstrap css。感谢

Answer 1

最简单的方法是在bootstrap.min.css文件后加载jqueryui.min.js。 （脏黑客）

另请注意，Bootstrap具有制作标签的语法。您可能想要使用它。这是一种更好的方法，因为它可以消除对JQuery UI的需求，如果它只用于那些选项卡。

$('.nav-tabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

您还可以采用第三种方法，包括使用JS函数手动覆盖CSS。

还有!important。

a {
  color: #2780e3 !important;
  text-decoration: none !important;
}

Answer 2

在这种情况下，您无法阻止jQuery css覆盖Bootstrap css。 jQuery css显然正在使用一个更具体的选择器，每次都会赢，无论加载什么顺序的css文件。

但是，您可以覆盖jQuery css。在这种情况下，假设您要保留默认的Bootstrap链接颜色（＃2780c3），您将在自己的css文件中创建以下规则，并确保您的css文件是加载到页面中的最后一个：

.ui-widget-content a {
  color: #2780c3;
}

每当遇到jQuery css使用更具体的选择器覆盖Bootstrap css的情况时，您只需创建一个与您自己的样式表中的重写jQuery css规则相同的css规则，并将属性值更改回Bootstrap css默认值。

您遇到的问题与css特异性有关。虽然它是在不久前写的，但下面的文章很好地解释了这个概念：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

bootstrap和jquery ui的CSS优先级问题

2 个答案: