Bootstrap 与我自己的 css 文件冲突

Question

我的自定义 main.css 无法更改字体大小或文本所在的位置，但是当我删除引导程序分配行时，它可以工作。

我假设 bootstrap.css 已经设置了我想要更改的那些属性的外观，因此它们将从我的 main.css 中生效，除非我删除

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

这是我的 head 部分的样子，我已经读到我必须在引导程序后分配我的自定义 main.css，这里是`

<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">

这是我要更改的属性的 HTML 代码`

<h1>Space</h1>
<section class="parallax">
  <div class="parallax-inner">
    <h2>Space</h2>
  </div>
</section>
<h1>Space</h1>

这是我的main.css，只有删除bootstrap行后才生效。

.parallax {
  background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
  background-size: 100% 100%;
}
.parallax-inner {
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
  font-size: 575%;
}
.h1 {
  font-size: 575%;
}

我也尝试过！重要标签。

Answer 1

我不是 Bootstrap 专家，但是

.parallax

和

.parallax-inner

听起来好像这些类将用于 Bootstrap 中的视差效果。因此它们可能会被 javascript 动态更改，这也会影响您自己的同名类。

如果可能，只需重命名您自己的类和 CSS 规则即可。您还可以将自己的类作为第二类添加到元素中，例如

<div class="parallax my_class">...

Answer 2

要覆盖预先存在的样式，请在 CSS 规则后使用

!important

。例如。

h4 {
  font-size: 14px !important
}

上述规则将覆盖 h4 的任何其他字体大小分配

Answer 3

如果您想绕过与引导样式的冲突，则必须更加具体。例如，您可以将 .parallax div 与其父元素作为目标。

Answer 4

在 CSS 中，句点 .表示一个类。如果您想单独使用标签，只需在 css 样式表中放置“h1”而不是“.h1”即可。

.parallax {
  background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
  background-size: 100% 100%;
}
.parallax-inner {
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
  font-size: 575%;
}
.h1 {
  font-size: 575%;
}

Answer 5

内部CSS工作正常，而不是外部CSS