Question

这似乎有些琐碎，但我无法解决上述问题。我想在以下元素中更改标题的font-size：

<header>
  <nav id="main-nav">
    <ul>
      <a href="#home"><li>Home</li></a>
      <a href="#about"><li>Über</li></a>
      <a href="#wid1"><li>Referenzen</li></a>
      <a href="#contact"><li>Kontakt</li></a>
      <a href="https://instagram.com/onlyguarddog">Instagram</a></li>
    </ul>
  </nav>
</header>

我尝试了以下代码：

header nav ul li a{
    font-size: 6px;
}

我三重四倍地检查了我的代码，但是以某种方式我找不到错误。我在这里通过JSfiddle包含了整个项目：

JSfiddle

我移动了css文件，同时将它打开了。它将其保存在旧位置。

Answer 1

您的<li>被包装在<a>中。即使您将CSS选择器更改为header nav ul a，它也是无效的标记结构，可能会引起一些麻烦。反转它们，您的CSS应该可以正常工作。

header nav ul li a {
  font-size: 6px;
}

<header>
  <nav id="main-nav">
    <ul>
      <li><a href="#home">Home</a></li>
    </ul>
  </nav>
</header>

Answer 2

您正在<a>中定位<li>。但是，在您的html中，您的a标签位于<ul>内。

要解决此问题，您可以将其添加到<li>内，也可以将CSS更改为

header nav ul a{
    font-size: 6px;
}

无法更改CSS中的字体大小

2 个答案: