Question

我是 css 新手，并试图让我的导航栏品牌和导航栏链接看起来相同的大小和相同的颜色，但是当我选择整个导航栏来更改字体和颜色时，每个链接都会继承字体但不继承颜色品牌不受影响

我想知道我可以进行哪些更改以使两者相似，这里是导航栏代码。这是我用来更改字体和颜色以及结果的 css。

#mainNavbar {
  font-size: 2em;
  color: #e84545;
  font-weight: 200;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-dark navbar-dark navbar-expand-md" id="mainNavbar">
  <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="nav-links">
    <ul class="navbar-nav">
      <li class="navbar-item">
        <a href="#home" class="nav-link">HOME</a>
      </li>
      <li class="navbar-item">
        <a href="#about" class="nav-link">ABOUT</a>
      </li>
      <li class="navbar-item">
        <a href="#tickets" class="nav-link">TICKETS</a>
      </li>

    </ul>
  </div>
</nav>

Answer 1

您要更改的文本位于 <a> 标签中，因此您需要将 CSS 应用于该标签。

#mainNavbar a {
  font-size: 2em;
  color: #e84545;
  font-weight: 200;
}

Answer 2

如果您只需要覆盖导航栏中链接的颜色和字体设置，那么您可以使用@Douglas 的解决方案。如果您需要正常的导航栏行为（活动类和悬停效果），那么您需要覆盖 Bootstraps 的样式。您需要查看每个具有字体颜色和大小的项目，并使用浏览器的开发者工具确定字体设置的来源，然后在您自己的页面 CSS 样式中覆盖这些设置。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
    /*#mainNavbar {
        font-size: 2em;
        color: #e84545;
        font-weight: 200;
    }*/

    .navbar-dark .navbar-brand {
        font-size: 2rem;
        font-weight: 200;
        color: #e84545;
    }

    .navbar-dark .navbar-brand:hover {
        color: rgba(232, 69, 69, 0.9);
    }

    .navbar-dark .navbar-nav .nav-link {
        color: rgba(232, 69, 69, 0.6);
        font-size: 2em;
        font-weight: 200;
    }

    .navbar-dark .navbar-nav .nav-link.active {
        color: #e84545;
    }

    

    .navbar-dark .navbar-nav .nav-link:hover {
        color: rgba(232, 69, 69, 0.9);
    }
</style>

<nav class="navbar navbar-expand-dark navbar-dark bg-dark navbar-expand-md" id="mainNavbar">
    <a href="#" class="navbar-brand" id="navbar-brand">CANDY</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-links" aria-label="Expand or Collapse The NavBar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav-links">
        <ul class="navbar-nav">
            <li class="navbar-item">
                <a href="#home" class="nav-link active">HOME</a>
            </li>
            <li class="navbar-item">
                <a href="#about" class="nav-link">ABOUT</a>
            </li>
            <li class="navbar-item">
                <a href="#tickets" class="nav-link">TICKETS</a>
            </li>

        </ul>
    </div>
</nav>

您可以调整颜色的透明度以满足您的需要，让用户知道菜单项之间存在差异。

使用整个导航栏更改字体和颜色时，Bootstrap 导航栏品牌和链接颜色不匹配

2 个答案: