h1标题上的链接是导入的网络字体大小的两倍

Question

我正在Visual Studio中构建一个网站，我遇到了CSS / HTML和导入的网络字体问题。

我为屏幕上的某个类别.mid设置了h1标签的样式，并且还在同一代码块中包含了h1标签的<a>个标签子代的样式。我想要一些h1标题作为链接，并在悬停时改变颜色，而其他只是静态的。然后我设置了另一个定义，简单地设置颜色在悬停状态下改变，同时保持其他属性不变。

虽然颜色变化有效且h1链接的样式与普通的h1标题相似，但文字更大（见图）

CSS代码：

@import url(https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900);

.mid h1, .mid h2, .mid h3, .mid h1 a:link, .mid h1 a:active, .mid h1 a:hover, .mid h1 a:visited {
        font-family: 'Orbitron', sans-serif;
        font-weight: 400;   
        margin-bottom: 10px;
        text-align: left;
        color: rgb(180,180,180);
        text-decoration: none;
    }

.mid h1, .mid h1 a, .mid h1 a:link, .mid h1 a:active, .mid h1 a:hover, .mid h1 a:visited {
        font-size: 1.4em;
        line-height: 2.1em;
    }

.mid h1 a:hover   {
        font-size: 1.4em;
        line-height: 2.1em;
        color: rgb(180,255,0);
    }

我已经尝试在悬停定义中再次设置大小，但它没有任何区别。当我从标题中删除<a>链接时，大小恢复正常。奇怪的是，整个CSS文档中没有大于h1 font-size属性的大小，并且假设size属性由于某种原因被应用于标题两次，或者存在某种冲突导致这种奇怪的行为。

另一个奇怪的是，将字体大小设置为1.0em可以解决问题（但会使h1太小）。

HTML如下：

<h1>Welcome</h1>

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

<div class ="rule"></div>

<h1><a href = "http://www.mylink.com">Graphic Design</a></h1>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>

非常感谢任何帮助。

Answer 1

em单位的行为有点像百分比 - 在1.4em内嵌入1.4em（正如您在h1和h1 a上所做的那样）在1.96em中与文档进行比较。

您可以省略额外的em语句，只保留h1 - 或使用rem单位;这些将设置相对于文档根目录的大小，而不是相对于当前元素：

.em  { font-size: 1.4em }
.rem { font-size: 1.4rem }

<div class="em">1.4em
  <div class="em">1.4em
    <div class="em">1.4em</div>
  </div>
</div>

<div class="rem">1.4rem
  <div class="rem">1.4rem
    <div class="rem">1.4rem</div>
  </div>
</div>

<div class="unstyled">foo</div>

Psuedoclasses略有不同 - 它们充当基类规则的替代品，而不是基类的子代。也就是说，如果您有以下规则：

a       {font-size: 1.4em}
a:hover {font-size: 1.4em}

Hover将项目保持在1.4em，不 1.96em，因为:hover规则替换基类上的相同规则而不是将其相乘。