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"/>

选择看起来像： https://i.imgur.com/VaAT9sW.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"/>

（首先放置您想要优先级较低的文件）

Answer 2

将所有JS移至顶部的底部CSS，然后尝试删除CSS部分中的“屏幕”

media =“ screen” />

至

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-select.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>

<body>
.....
</body>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script href="bootstrap-select.min.js"></script>

希望获得帮助。

Answer 3

外部样式表的顺序只有在所有样式表都具有相同选择器、属性、权重和特定性的样式时才重要。这不太可能是真的。

所以我要做的是首先禁用您的工作表并仅使用 Bootstrap 来查看您的网页。在浏览器中按 F12 并拉出实际的样式级联窗口，看看正在应用哪些规则。我可以告诉您，您可能有很多 Bootstrap 样式被 select 元素继承。 Bootstrap 首先尝试更改核心“选择”元素的边距、字体和行高。然后它通过应用于自定义样式的类对自定义样式进行分层。然后查看包含它的包装器 div 或块元素。 Bootstrap 喜欢浮动元素，它会将元素从页面中分离出来并阻止它们。

现在重新添加您的工作表并查看添加到 Bootstrap 样式中的级联内容。

即使它们的类级联在您的样式上，您的样式也可能会更改 Bootstrap 不会影响的属性。因此，我会关闭您的工作表中影响“选择”元素的所有样式，然后小心地将您自己的选择样式插入到 ADD 中，而不更改 Bootstrap 的样式。我只会改变简单的效果，比如颜色或“选择”所在的外部块级元素。

Boostrap没有覆盖我自己的CSS

3 个答案: