为啥我的导航栏链接的颜色不会改变[重复]

Posted

技术标签:

【中文标题】为啥我的导航栏链接的颜色不会改变[重复]【英文标题】:Why won't the color of my navbar links change [duplicate]为什么我的导航栏链接的颜色不会改变[重复] 【发布时间】:2017-07-28 01:43:18 【问题描述】:

这就是我现在拥有的 html。我正在尝试更改导航栏中的特定链接。 “font-family”、“line-height”和“font-size”都可以,但是链接的颜色不会改变。

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-left"><img src="resources/assets/yf_logo.svg"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Programs</a>
              <ul class="dropdown-menu">
                <li><a href="#">Shelter</a></li>
                <li><a href="#">Drop-ins</a></li>
                <li><a href="#">Street Outreach</a></li>
                <li><a href="#">Community Partners</a></li>
                <li><a href="#">FAQ</a></li>
              </ul>
            </li>
            <li class="textstyle16"><a href="#">Get Involved</a></li>
            <li class="textstyle16"><a href="#">About</a></li>
            <li class="textstyle16"><a href="#">Contact</a></li>
            <li class="textstyle18"><a href="#">Donate</a></li>
          </ul>
        </div>
      </div>
    </nav>

这是我的第一个 css

    .textstyle16 
font-family:"montserrat-regular";
font-size:18px;
line-height:21px;
color:#474747;

这是我的第二个 css

    .textstyle18 
font-family:"montserrat-regular";
font-size:18px;
line-height:21px; 
color:#ffffff;
    

【问题讨论】:

没有字体:#fffff;选项 【参考方案1】:

你需要使用color:(不是font:)。

【讨论】:

【参考方案2】:

您需要使用.textstyle16 a.textstyle16 a:link 作为选择器。链接是.textstyle16 元素的子元素,它们本身没有该类,并且浏览器默认样式中有a 标签的颜色声明,如果您不这样做,则适用不要使用这些选择器。

【讨论】:

【参考方案3】:

它可能在您的代码中的其他地方被覆盖。将!important 添加到颜色定义中。如果这纠正了颜色,那么是的,它在您的样式中的某处被覆盖。

右键单击该链接并在 Google Chrome 或 Firefox 中“检查”该链接。您将能够看到具体应用于链接的样式。

例子:

【讨论】:

以上是关于为啥我的导航栏链接的颜色不会改变[重复]的主要内容,如果未能解决你的问题,请参考以下文章

不希望导航栏链接在单击时更改颜色(悬停效果)

导航栏项目的文本颜色不反映自定义 CSS [重复]

在 Swift 中更改导航栏颜色

悬停时如何更改导航栏链接上的文本颜色(和背景)? [复制]

为啥ios中的状态栏和导航栏背景颜色不同

为啥我的 Vue 导航栏更改了路由但没有更新路由器视图?