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