H1没有得到任何风格，但h2，h3，... h6是

我使用Skeleton V2.0.4来创建一个登陆页面，但由于某种原因，我没有得到正确的风格。这是唯一的线指的是：H1没有得到任何风格，但h2，h3，... h6是

/* Typography 
 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
 
h1, h2, h3, h4, h5, h6 { 
 
    margin-top: 0; 
 
    margin-bottom: 2rem; 
 
    font-weight: 300; } 
 
h1 { font-size: 8.0rem; line-height: 1.2; letter-spacing: -.1rem; } 
 
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 
 
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 
 
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 
 
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 
 
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 
 

 
/* Larger than phablet */ 
 
@media (min-width: 550px) { 
 
    h1 { font-size: 5.0rem; } 
 
    h2 { font-size: 4.2rem; } 
 
    h3 { font-size: 3.6rem; } 
 
    h4 { font-size: 3.0rem; } 
 
    h5 { font-size: 2.4rem; } 
 
    h6 { font-size: 1.5rem; } 
 
}

<h1>Heading 1</h1> 
 
<h2>Heading 2</h2> 
 
<h3>Heading 3</h3> 
 
<h4>Heading 4</h4> 
 
<h5>Heading 5</h5>

当我在Safari或Chrome上运行，它看起来像这样：

这是怎么回事？

来源

2017-03-07 Hugo Moutinho

您是否检查过浏览器中的元素以查看它适用的规则...？ – deceze

我在几个不同尺寸的浏览器中试过你的代码，并且样式似乎正确应用。你确定没有其他事情了吗？ –

这一点做的“野蛮”的方式，但尝试

h1 { 
font-size: 8.0rem!important; 
line-height: 1.2!important; 
letter-spacing: -.1rem!important; 
}

也许一些其他的CSS文件覆盖当前的东西。

来源

2017-03-07 14:09:35 Innervisions

“！重要”技巧解决了它，但有点弄乱了响应性能。 –

为响应中的其余h1添加重要的 – Innervisions

我解决了它，但仍然不知道它为什么发生。

我检查了它，唯一可能的区别是，我的HTML有另一个CSS样式表链接到它，虽然它是完全空（严重，根本没有线！）。删除链接后，标签开始正常工作。

它已经解决了，但我仍然不知道为什么它只影响了而不是标题标题。错误可能？

来源

2017-03-07 14:14:23

现在我添加了“body {background：blue}”后添加了样式表，H1工作正常。我删除了它，并将它留空。 PLOT TWIST：H1保持良好状态。说真的，有什么？ –

H1没有得到任何风格，但h2，h3，... h6是

回答

相关问题