html - CSS 中的什么规则将指导我理解使用哪个 div 类来设置 h1 和 p 标签的样式？

Question

所以我想在不影响 .container 中的 p 元素的情况下设置 h1 和 p 元素的样式.main div 内的 div。

<div class="header">
      <div class="container">
        <h1>Cats are from Mars and Dogs are from Venus</h1>
        <p>Which planet do you prefer to go visit?</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="display-exercise.html">display</a></li>
          <li><a href="float-exercise.html">float</a></li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/icon.png" alt="cat image">
        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions
          to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most
          challenging projects.</p>
        <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
      </div>
    </div>

我凭直觉知道我必须在 .header 选择器中添加 h1 和 p 文本样式，但我不确定如何解释原因。

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

.container {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 10px;
}

.header {
  background: url(https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/outerspace_landscape.jpeg) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  height: 800px;
  text-align: center;
  color: white;
}

这与继承有关吗？

Answer 1

更多关于specificity比继承。

根据下面我的规则，每一个都变得更加具体。

h1 {color:#F00;}
.container h1 {color: #0F0;}
.header .container h1 {color:#00F;}

<h1>"Naked" H1</h1>
<div class="header">
  <div class="container">
    <h1>Cats are from Mars and Dogs are from Venus</h1>
    <p>Which planet do you prefer to go visit?</p>
    <a class="btn" href="#">Learn More</a>
  </div>
</div>

<div class="nav">
  <div class="container">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="display-exercise.html">display</a></li>
      <li><a href="float-exercise.html">float</a></li>
    </ul>
  </div>
</div>

<div class="main">
  <div class="container">
    <h1>H1 Out of the header</h1>
    <img src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.3_the_position_property/icon.png" alt="cat image">
    <h2>The Innovation Cloud Conference</h2>
    <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
    <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
    <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
</div>