CSS主体属性不是由h1标签继承的

时间：2016-03-02 01:17:52

标签： html css

HTML：

<body class="pageStyle">
<h1>The Amazing World of CSS</h1>
<p><strong>Sed ut perspiciatis</strong> unde omnis iste natus error sit <em>voluptatem accusantium</em> doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <strong>inventore veritatis et quasi architecto beatae</strong> vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia  eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the <a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p>
</body>

CSS：

.pageStyle {
        font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-size: 18px;
    }

结果：https://jsfiddle.net/2tqxadpn/

为什么<h1>代码不是18px？

2 个答案:

答案 0 :(得分：2)

由于h1有一些默认样式，其中一个是font-size，默认情况下为2em，因此您需要在font-size <中设置h1 / p>

段

.pageStyle {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 18px;
}
h1 {
  font-size: inherit /* or 18px */
}
<body class="pageStyle">
  <h1>The Amazing World of CSS</h1>
  <p><strong>Sed ut perspiciatis</strong> unde omnis iste natus error sit <em>voluptatem accusantium</em> doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo <strong>inventore veritatis et quasi architecto beatae</strong> vitae dicta sunt explicabo.
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia eos qui ratione voluptatem sequi nesciunt. Learn more about CSS at the <a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a>.</p>
</body>

OP评论：

  

好的，但是这种风格不应该覆盖吗？

不会因为body是父母而不会覆盖。并且h1默认样式正在直接应用于h1，因此关于特异性它更具体

进一步阅读：

MDN CSS Specificity

Inheritance and cascade

CSS Specificity

答案 1 :(得分：1)

这与CSS特异性有关。来自Mozilla's docs：

  

以下选择器类型列表是通过提高特异性来实现的：

     
      
  • 类型选择器（例如，h1）和伪元素（例如，之前）。
    •   
  • 类选择器（例如.example），属性选择器（例如[type =＆＃34; radio＆＃34;]）和伪类（例如：hover）。
    •   
  • ID选择器（例如#example）。
    •   

另请注意!important例外：

  

在样式声明中使用重要规则时，此声明   覆盖任何其他声明......

在您的情况下，由于浏览器具有所有元素的默认样式，并且这些样式是在元素的名称（h1，a等...）上定义的，因此优先于在父元素上定义的规则或通过CSS选择器，因此不应用您的样式。请参阅此屏幕截图，其中显示了h1的浏览器默认样式：

UserAgent stylesheet for H1

尝试将您的样式更改为定位h2或将pageStyle类添加到h2以查看。

相关问题
最新问题