Question

我有一个导航栏，其链接似乎忽略了我的字体系列规则。颜色和大小都很好，但我似乎无法正确更改字体。这是HTML：

<div id="navigation">
<ul>
<li><a href="#" class="currentpage">HOME</a></li>
<li><a href="music.html" class="nav">MUSIC</a></li>
<li><a href="live.html" class="nav">LIVE</a></li>
<li><a href="contact.html" class="nav">CONTACT</a></li>
</ul>
</div>

这是CSS：

#navigation {
margin-top: 20px;
width: 100%;
text-align: center;
}

#navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#navigation li {
display: inline;
}

a.nav {
display: inline-block;
width: 25%
font-family: "Century Gothic", Arial;
color: #ffffff;
font-size: 36px;
text-decoration: none;
}

a.currentpage {
display: inline-block;
width: 25%
font-family: "Century Gothic", Arial;
color: #aa00ff;
font-size: 36px;
text-decoration: none;
}

为什么我的其他规则正常但字体系列被忽略了？感谢。

Answer 1

在上一个陈述之后缺少分号。

这使得它和font-family语句无效。

如果你有used a validator，就会检测到这一点。

Answer 2

您需要在宽度值后添加分号。

a.nav {
    display: inline-block;
    width: 25%;
    font-family: "Century Gothic", Arial;
    color: #ffffff;
    font-size: 36px;
    text-decoration: none;
}

a.currentpage {
    display: inline-block;
    width: 25%;
    font-family: "Century Gothic", Arial;
    color: #aa00ff;
    font-size: 36px;
    text-decoration: none;
}

Answer 3

a.nav将使用“nav”类选择页面上的任何“a”元素。这些不存在，因此您的规则不会生效。

我将此选择器切换为'#navigation a'，它匹配#navigation div中的所有项目。（第18行）

以下是代码：

.navigation a {
  display: inline-block;
  width: 25%;
  font-family: "Century Gothic", Arial;
  color: #ffffff;
  font-size: 36px;
  text-decoration: none;
}

CodePen with the change

你的风格仍然存在，你只是没有应用它们！：）

为什么我的导航链接上没有字体系列？

3 个答案: