我如何更改 .class 和 'a' 设置？

Question

我的一些代码是这样组织的：

<div class="row">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">FAQ</a></li>

我需要更改活动 class 的背景颜色，我还需要更改 'Home' 和 'FAQ' 的颜色。我该怎么做？我尝试了一百万种不同的方法，但我是 HTML/CSS 的新手，遇到了一些困难。

Answer 1

i need to change the the background color of the active class

您可以通过将以下内容添加到 CSS 来更改活动 class 的背景：

.active{background:red;}

and i also need to change the color of 'Home' and 'FAQ'

您可以使用 'a' 选择器同时定位主页和常见问题解答，因为它们都是 'a' 元素内的文本节点。

.nav a{background:blue;}

编辑：既然您已将问题扩展到修改文本，这里有一些额外的示例。

如果您想修改导航栏文本 link 属性，您可以使用以下 CSS:

.navbar-default .navbar-nav>li>a{ color:green; font-size:15px; font-weight:bold; }

如果您想修改导航栏下拉文本 link 属性，您可以使用以下 CSS：

.dropdown-menu>li>a{ color:blue; }

进行修改将使您的网站看起来像这样：

Answer 2

.active {
    background:#333 !important;
}

对于您要编辑的其他链接，您可以添加 class:

<li><a href="#" class="navLinks">FAQ</a></li>

然后样式 class 类似于 active class

.navLinks {
    background:#333 !important;
}

我使用了 !important，因为我看不到你的代码，所以我不知道 bootstrap 是否被覆盖。我假设您正在使用 bootstrap 因为我熟悉代码。先尝试不带 !important 的 css 看看是否有效。您可以将其添加到链接到您的页面或文档头部的样式 sheet 中。访问此站点以获取有关 css 和 html http://www.w3schools.com/css/

的更多信息

Answer 3

很简单，你只需要为那些项目定义CSS。这是一个例子：

ul.nav li { background-color: #ff0000; } 
ul.nav li.active { background-color: #00ff00; }

我如何更改 .class 和 'a' 设置？

How can i change the .class and 'a' settings?

html

css

twitter-bootstrap-3