bootstrap与我自己的css文件冲突

Question

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

我假设bootstrap.css已设置我想改变这些属性的出现，让他们采取除非我删除

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

从我的main.css影响这里是我的头部部分的样子，我已经读过，我必须在引导后指定我的自定义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代码，我想change`

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

这里是我的main.css，其中，只有当自举行被删除的效果。

.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%; 
 
}

我都试过！importnant标签了。

Answer 1

我不是一个引导专家，但.parallax和.parallax-inner声音仿佛这些类将被用于在引导视差效果。所以它们可能会被一个javascript动态地改变，这也会影响到你自己的同名类。

如果可能，只需重命名您自己的类和CSS规则。您还可以将自己的课程作为第二个课程添加到某个元素中，例如<div class="parallax my_class">...

Answer 2

要覆盖预先存在的样式，请在CSS规则后使用!important。例如。

h4 { 
    font-size: 14px !important 
} 

以上规则将覆盖H4

Answer 3

你必须要，如果你想绕过与引导styles.For例如冲突，更具体的任何其他字体大小分配，您可以指定.parallax格与其父元素。

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%; 
 
}