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

Dav*_*man 1 html css

我的标题和文档的另一部分中有一个h1.我被告知这个影响搜索引擎优化,但我离题,我只是通过复制其他人的页面并尝试设置他们的样式,而不是看他们的代码.

所以我的h1样式很好但是当我在一个section类中定位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;
}
Run Code Online (Sandbox Code Playgroud)
<body>
    <h1>This is a header</h1>
    <section class="header">
        <h1>This is a header</h1>  
    </section>
</body>
Run Code Online (Sandbox Code Playgroud)

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

如果我谋杀任何CSS术语,请道歉.

Luí*_* A. 5

inherit关键字指定属性应从其父元素继承其值.所以父节是节,并且节上没有字体规则.删除继承.

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;
}
Run Code Online (Sandbox Code Playgroud)
<body>
    <h1>This is a header</h1>
    <section class="header">
        <h1>This is a header</h1>  
    </section>
</body>
Run Code Online (Sandbox Code Playgroud)

  • 字体权重也应该是400而不是400px. (3认同)