0

我很困惑为什么这两个 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;
}
4

2 回答 2

2

#site-offline-heading h1告诉 css 为元素内的所有 h1 标题设置样式，id 为 site-offline-heading

您的另一个 h1 在此元素之外，因此使用 h1 的默认样式，如果您想对所有 h1 标签应用相同的样式，请使用：h1{/*styling*/}

于 2013-03-29T16:06:39.617 回答
0

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

于 2013-03-29T19:12:14.433 回答