將CSS樣式應用於每個元素

Question

我遇到了CSS問題。當我將任何樣式應用於我的jumbotron類的h2，h3時，它將應用於每個其他h2和h3。 檢查我的github回購下面的代碼。 http://usamahameed.github.io/

Answer 1

這對初學者來說很簡單。快速解釋;

如果您定義一個整體標籤，例如;

h1 {color:red;} 
<h1>EVERY H1 tag will be RED</h1> 

如果你把它明確了class或id（注：id將只適用於一個對象，class可以多次使用到許多對象）屬性設置來區分的風格只爲一個對象，然後它將只適用於該對象，如;

.GreenH1 {color: green;} 
#BlueH1 {color: blue;} 

<h1 class="GreenH1">This H1 will be green</h1> 
<h1 id="BlueH1">This H1 will be blue</h1> 

除了這並不意味着你必須使每一個單獨明確。假設你希望面板中的所有H1都是一種顏色，而另一個H1中的所有H1都是不同的顏色。然後你可以在父項中使用selector來指定它;

.OrangeH1s > h1 {color:orange;} 
.PurpleH1s > h1 {color:purple;} 

    <div class="OrangeH1s"> 
     <h1>One</h1> 
     <h1>Two</h1> 
     <h1>Three</h1> 
    </div> 

    <div class="PurpleH1s"> 
     <h1>One</h1> 
     <h1>Two</h1> 
     <h1>Three</h1> 
    </div> 

這是CODEPEN TO PLAY或使用下面的堆棧編輯器。

h1 {color:red;} 
 

 
.GreenH1 {color: green;} 
 
#BlueH1 {color: blue;} 
 

 
.OrangeH1s > h1 {color:orange;} 
 
.PurpleH1s > h1 {color:purple;}

<h1>EVERY H1 tag will be RED</h1> 
 

 
<h1 class="GreenH1">This H1 will be green</h1> 
 
<h1 id="BlueH1">This H1 will be blue</h1> 
 

 
<div class="OrangeH1s"> 
 
    <h1>One</h1> 
 
    <h1>Two</h1> 
 
    <h1>Three</h1> 
 
</div> 
 
     
 
<div class="PurpleH1s"> 
 
    <h1>One</h1> 
 
    <h1>Two</h1> 
 
    <h1>Three</h1> 
 
</div>

希望這有助於，乾杯！

Answer 2

使用一個元素內的樣式<h2 style="color:red;">tratata</h2>或給元素ID和 賦值樣式。