为什么我的导航栏链接的颜色不会改变
Why won't the color of my navbar links change
这就是我现在的 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;
}
它可能在您代码的其他地方被覆盖了。将 !important
添加到颜色定义中。如果这更正了颜色,那么是的,它会在您的样式中的某处被覆盖。
在 Google Chrome 或 Firefox 中右键单击 link 和 "inspect" link。您将能够看到具体应用于 link 的样式。
示例:
您需要使用 color:
(而不是 font:
)。
您需要使用 .textstyle16 a
或 .textstyle16 a:link
作为选择器。链接是 .textstyle16
元素的 子元素 ,它们本身没有 class,并且有 a
标签的颜色声明如果您不使用这些选择器,则适用于浏览器的默认样式。
这就是我现在的 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;
}
它可能在您代码的其他地方被覆盖了。将 !important
添加到颜色定义中。如果这更正了颜色,那么是的,它会在您的样式中的某处被覆盖。
在 Google Chrome 或 Firefox 中右键单击 link 和 "inspect" link。您将能够看到具体应用于 link 的样式。
示例:
您需要使用 color:
(而不是 font:
)。
您需要使用 .textstyle16 a
或 .textstyle16 a:link
作为选择器。链接是 .textstyle16
元素的 子元素 ,它们本身没有 class,并且有 a
标签的颜色声明如果您不使用这些选择器,则适用于浏览器的默认样式。