在几个不同的类中使用一个公共类答案

【问题标题】：Use a Common Class in several different classes在几个不同的类中使用一个公共类
【发布时间】：2017-05-30 13:52:36
【问题描述】：

我对一些 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>

我想将header 类中的container 类与front-image 类中的另一个container 类区分开来

【问题讨论】：

标签： html css containers

【解决方案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>

【讨论】：