html - 在几个不同的类中使用公共(public)类

Question

我对某些 div 和标签的用法有点困惑。我知道我可以用 .class1.class2 链接两个类, 我可以使用 .class1 h1使用 class1 选择所有 h1 元素类，即p.class1选择类别为 class1 的 p 个元素但我想使用类似 button 的类并在不同的 div 中使用它，但我不知道如何区分 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>