将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和 赋值样式。