在幾個不同的類中使用通用類

Question

我對某些div和標籤用法感到困惑。我知道我可以用.class1.class2鏈接兩個類，我可以使用.class1 h1選擇所有具有class1類的h1元素，p.class1選擇具有class1類的p元素，但是我想使用類似button的類並在不同的div中使用它，但是I不知道如何區分CSS代碼。

.header { 
 
    height: 222px; 
 
    background-color: white; 
 
    width: 100%; 
 
} 
 
.container { 
 
    position: relative; 
 
    text-align: center; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.container h1 { 
 
    font-size: 48px; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
} 
 
.container h2 { 
 
    font-size: 16px; 
 
    font-family: 'Oswald', sans-serif; 
 
    font-weight: 200; 
 
}

<div class="header"> 
 
     <div class="container"> 
 
     <h1>jane bloglife</h1> 
 
     <h2>Welcome to the world of Jane's world</h2> 
 
     </div> 
 
    </div> 
 
    <div class="front-image"> 
 
    <div class="container"> 
 
     <h1>Jane's</h1> 
 
     <h2>Fashion Blog</h2> 
 
     <div class="button"> <a href="">suscribe</a></div> 
 
     </div> 
 
    </div>

我想區分用container類是header類中從其他container類是front-image類

Answer 1

裏面header風格元素中的元素，使用此格式.header > .container：

.header>.container h1 { 
 
    font-size: 50; 
 
    color: red; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <h1>jane bloglife</h1> 
 
    <h2>Welcome to the world of Jane's world</h2> 
 
    </div> 
 
</div> 
 
<div class="front-image"> 
 
    <div class="container"> 
 
    <h1>Jane's</h1> 
 
    <h2>Fashion Blog</h2> 
 
    <div class="button"> <a href="">suscribe</a></div> 
 
    </div> 
 
</div>

樣式元素中front-image，使用這種格式.front-image > .container：

.front-image>.container h1 { 
 
    font-size: 50; 
 
    color: red; 
 
}

<div class="header"> 
 
    <div class="container"> 
 
    <h1>jane bloglife</h1> 
 
    <h2>Welcome to the world of Jane's world</h2> 
 
    </div> 
 
</div> 
 
<div class="front-image"> 
 
    <div class="container"> 
 
    <h1>Jane's</h1> 
 
    <h2>Fashion Blog</h2> 
 
    <div class="button"> <a href="">suscribe</a></div> 
 
    </div> 
 
</div>