Html 使用 Materialize CSS (rails) 更改导航栏上的文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33746269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the text color on a nav bar using Materialize CSS (rails)
提问by torie
I want to create a navbar with a white background and black text, but have been unable to get the text in the links within the navbar to be anything but white.
我想创建一个带有白色背景和黑色文本的导航栏，但一直无法将导航栏中链接中的文本变为白色。
Things I've tried:
- adding the class "black-text" to the li tags, to the ul tag, to the surrounding div and nav tags
- defining a class in my application.scss file for each li tag.
- adding li, nav, a { color: black; } to my application.scss file
我尝试过的事情：
- 将类“black-text”添加到 li 标签、ul 标签、周围的 div 和 nav 标签
- 在我的 application.scss 文件中为每个 li 标签定义一个类。
- 添加 li, nav, a { color: black; 到我的 application.scss 文件
Here is the html for the navbar:
这是导航栏的 html：
<header class="nav">
<nav>
<div class="nav-wrapper white">
<a href="/" class="brand-logo black-text">GlobalPursuit</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><%= link_to "Pursuits", pursuits_path %></li>
<li><%= join_dashboard_path %></li>
<li><%= login_logout_path %></li>
<li><%= trips_cart_display %></li>
</ul>
</div>
</nav>
</header>采纳答案by MBahamondes
Try this with rails, I worked for me, So if you modify the style. see in full page.
用 rails 试试这个，我为我工作，所以如果你修改样式。见整页。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<style>
nav ul li a{
color: black;
}
</style>
</head>
<body>
<header class="top-nav">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper white black-text">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li class="active"><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main></main>
<footer></footer>
</body>
</html>回答by Edwin Carra
As adding a style change to the html will work I would recommend staying within the materializecss framework that you have chosen.
由于向 html 添加样式更改会起作用，我建议您保留在您选择的 materializecss 框架内。
<div class="nav-wrapper"></div>
The default to this nav bar background color is pink, but just add one of the built in colors/shades and you will get very cool effects.
此导航栏背景颜色的默认值是粉红色，但只需添加一种内置颜色/阴影，您将获得非常酷的效果。
<div class="nav-wrapper blue lighten-1></div>
Now my nav bar has a light blue background color. Same applies to the text.
现在我的导航栏有一个浅蓝色的背景色。同样适用于文本。
<div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
This will produce a card panel with blue text. Hope this helps.
这将产生一个带有蓝色文本的卡片面板。希望这可以帮助。
Answer based on http://materializecss.com/color.html
回答by MBahamondes
Try this on the brand to have a black text:
在品牌上试试这个有黑色文字：
<a href="#" class="brand-logo black-text">Logo</a>
回答by quinlo
Looks like the materialize library defines the color as white at the nav ul alevel:
看起来物化库在nav ul a级别将颜色定义为白色：
nav ul a {
-webkit-transition: background-color .3s;
transition: background-color .3s;
font-size: 1rem;
color: #fff;
display: block;
padding: 0 15px;
cursor: pointer;
}
To overwrite this you would have to add the materialize text-color class to the actual <a>tag in the nav <ul>:
要覆盖它，您必须将 materialize text-color 类<a>添加到 nav 中的实际标签<ul>：
<nav>
<div class="nav-wrapper white">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="black-text" href="sass.html">Sass</a></li>
<li><a class="black-text" href="badges.html">Components</a></li>
<li><a class="black-text" href="collapsible.html">Javascript</a></li>
<li><a class="black-text" href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
