关于标题的CSS3样式

Question

好的，我在<header>中有一个<h1>，在<section>中有一个<h1>。 第一个问题是为什么这两个<h1>的大小不同？ 我认为他们自己的大小取决于他们的父母标签，我不确定。 第二个是我用外部CSS设置<h1>的样式，例如：

h1{
   font-size:2em; 
}

教程，但是<header>内的<h1>不会改变，只有<section>内的<h1>才有意义。 即使在html中，我仍然是初学者，所以请解释清楚。 提前致谢。

Answer 1

问题演示： http : //jsfiddle.net/c06tpb3u

您没有使用任何CSS重置，这意味着您将受到浏览器的怜悯和默认的Stylsheet的影响 。

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}

是为h1标题元素设置的默认样式

而对于section事情变得越来越咸：

h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
    display: block;
    font-size: 1.5em; /*<<<< and the new value*/
    font-weight: bold;
    margin: 0.83em 0;
}
h1 {
    /*display: block;*/
    /*font-size: 2em;*/
    /*font-weight: bold;*/
    /*margin: 0.67em 0;*/
}

因此，您可以注意到（上面是在FF中进行的检查），因为h1位于section ，所以h1被覆盖。 该组中省略了<heading>元素，将heading1保留为默认的2em字体大小。

_{浏览器的HTML元素默认CSS
https://developer.mozilla.org/en/docs/Web/CSS/length}

EM
该单位表示计算出的元素的字体大小。 如果在font-size>属性本身上使用，它表示元素的继承的font-size。 该单元通常用于创建可缩放的布局，即使用户更改字体大小，该布局也可以保持页面的垂直节奏。 CSS属性line-height，font-size，margin-bottom和margin-top通常具有以em表示的值。

Answer 2

要覆盖任何CSS，请在样式中添加!important表示法。

h1{
   font-size:2em !important; 
}

这将覆盖任何浏览器的默认CSS。