Question

我很困惑为什么这两个h1标签有不同的字体大小，显然它们包含相同的属性/声明。对于我所掌握的知识，我觉得它与继承有关;看看一个h1标签是如何嵌套而另一个不是 HTML：

 <div id="site-offline-container">
        <div id="site-offline-heading">
            <h1>Hello World</h1>
        </div>
    </div>

   <h1 class="hello">Hello World</h1>

CSS：

body {
  background:#fff;
  font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
  font-size:14px; letter-spacing:1px; color:#000;
}
#site-offline-heading {
  font-size: 40px;
  letter-spacing:-5px;
  color:#000;
  text-shadow: rgba(255,255,255,0.2) 1px 1px;
}
#site-offline-heading h1 {
  margin-bottom:10px;
}
.hello {
  font-size: 40px;
  letter-spacing:-5px;
  color:#000;
  text-shadow: rgba(255,255,255,0.2) 1px 1px;
}

Answer 1

#site-offline-heading h1告诉css使用id site-offline-heading

设置元素内所有h1标题的样式

你的其他h1在这个元素之外，所以使用h1的默认样式，如果你想对你的所有h1标签应用相同的样式，请使用：h1{/*styling*/}

Answer 2

您在第一种情况下在包含h1的元素上设置字体大小，直接在第二种情况下的h1元素上设置字体大小。这有所不同，因为在第一种情况下，h1采用其默认字体大小200％，即其容器（父级）字体大小的两倍。

修改了h1字体大小

2 个答案: