Question

<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>

    <div class="navbar-inverse side-collapse in">
      <nav role="navigation" class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#Home">Home</li>
          <li><a href="#users">Users</a></li>
          <li><a href="#">Places</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

我需要格式化li链接，但无论我尝试什么，我都没有结果。我是css和bootstrap的新手，所以任何帮助都会很精彩并且感激不尽

/* unvisited link */
nav navbar-nav a:link {
color: red;
}

/* visited link */
nav navbar-nav a:visited {
color: green;
}

/* mouse over link */
nav navbar-nav a:hover {
color: hotpink;
}

/* selected link */
nav navbar-nav  a:active {
color: blue;
}

Answer 1

您需要定位<a>

.nav li a {
  color : red;
 }

Answer 2

nav navbar-nav是CSS类选择器。所以他们必须用''表示。应用CSS时面前。您的代码必须如下所示：

    /* unvisited link */
    .navbar-inverse .navbar-nav>li>a {
        color: red;
    }

您可以同样编辑CSS的其余部分。

格式bootsrap nav链接css

2 个答案: