Question

我对某些div和标签用法感到困惑。我知道我可以使用.class1.class2链接两个类，我可以使用.class1 h1选择具有class1类的所有h1元素，p.class1选择类别为{的{p}元素{1}}但我想使用像class1这样的类，并在不同的div中使用它，但我不知道如何区分CSS代码。

＆＃13;

button

＆＃13;

.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;
}

＆＃13;

我希望将<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类进行区分

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>

在几个不同的类中使用Common Class

1 个答案: