html - 为什么我的 h1 设置不适用于 <section> 内的 h1 元素

标签 html css

我的页眉和文档的另一部分中有一个 h1。有人告诉我这会影响 SEO,但我离题了,我只是通过复制其他人的页面并尝试像他们那样设置样式而不看他们的代码来学习。

所以我的 h1 样式很好,但是当我在节类中定位 h1 时,样式不适用。

h1 {
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.7em;
  font-weight: 400px;
  margin: 1px auto 13px;
}

.header h1 {
  border-top: 3px double #232323;
  padding-top: 10px;
  font-family: inherit;
}
<body>
    <h1>This is a header</h1>
    <section class="header">
        <h1>This is a header</h1>  
    </section>
</body>

我的猜测是 class.h1 规则覆盖了 h1 规则。如果是这种情况,我如何将我的顶部边框应用到我的 h1,同时仍然继承 h1 属性。

如果我谋杀了任何 CSS 命名法,我深表歉意。

最佳答案

inherit 关键字指定属性应从其父元素继承其值。所以parent是section,section上的字体没有规定。删除继承。

h1 {
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.7em;
  font-weight: 400;
  margin: 1px auto 13px;
}

.header h1 {
  border-top: 3px double #232323;
  padding-top: 10px;
}
<body>
    <h1>This is a header</h1>
    <section class="header">
        <h1>This is a header</h1>  
    </section>
</body>

关于html - 为什么我的 h1 设置不适用于 <section> 内的 h1 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28281852/

相关文章:

php - 如何从文本节点 xpath 中排除 html 注释?

javascript - 从 ajax 调用获取 HTML 或 JSON 响应,哪个好?

html - 如何连续显示多个图像始终覆盖整个宽度

javascript - 通过参数清除缓存

css - 将其转换为 css 样式表

html - 如何使用 div 将图像垂直居中?

javascript - 可以滚动到 div 内的下一个元素吗?

javascript - 使用 100vh 定位 div

javascript - 如何使用 JavaScript 中的按钮动态添加/删除父节点?

html - 占位符不显示