css - Bootstrap 没有覆盖我自己的 css

Question

我正在开始使用 bootstrap，我想使用 boostrap 进行简单的选择，但不知何故它破坏了我的页面。我以为 boostrap 会覆盖我自己的 css 但它没有发生，为什么？

<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<script href="jquery-3.2.1.min.js"></script>
<script href="bootstrap.min.js"></script>
<script href="bootstrap-select.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>


<link rel="stylesheet" type="text/css" href="style.css" media="screen"  />

交换位置后(使用链接以确保它们正确):

<link rel="stylesheet" type="text/css" href="style.css" media="screen"  />

<link rel="stylesheet" type="text/css" media="screen" href="bootstrap-select/dist/css/bootstrap-select.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>

<link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap.min.css"/>

选择看起来像: /image/7nUr3.png

Answer 1

这是由于您设置导入的顺序所致。进一步向下的导入比之前的导入具有优先级(覆盖)。

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"  />

应改为:

<link rel="stylesheet" type="text/css" href="style.css" media="screen"  />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

(将您想要降低优先级的文件放在前面)