Question

<div class = "navbar navbar-inverse navbar-static-top">
                <div class = "container">
                <a href= "#" class = "navbar-brand">#</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                <div class  = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>




.nav navbar-nav navbar-right .active a {
color: yellow;

大家好我想将我的活动颜色更改为其他东西我尝试过在堆栈溢出时发现的一些修复但它不起作用。请你帮帮我吗？

Answer 1

您的选择器似乎不正确：

.nav navbar-nav navbar-right .active a {
    color: yellow;

这将匹配<a>元素的*.active标记，该<navbar-right>元素是<navbar-nav>的子元素，*.nav的子元素是.nav.navbar-nav.navbar-right .active a {的子元素{ {1}}元素。

也许您正在寻找：

<a>

哪个适用于*.active标记，该标记是*.nav.navbar-nav.navbar-right元素的子元素，是${env:L1a:L1a2a:L1a2a1} = 'othervalue'元素的子元素。

Answer 2

我相当肯定这是你的CSS中的语法问题。这适用于jsfiddle。它在您的代码中有效吗？

＆＃13;

.nav.navbar-nav.navbar-right .active a {


  color: yellow;


}

＆＃13;

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">#</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>
        </li>

＆＃13;

Answer 3

您需要将CSS封装在<style> </style>标记中并关闭左括号。

或者，您可以创建一个名为＆＃34; main.css＆＃34;的单独文件，将您的样式代码放在那里并链接到HTML <head> </head>标记内的文件：

<link rel="stylesheet" type="text/css" href="main.css">

解决方案1：在HTML文件中

<div class = "navbar navbar-inverse navbar-static-top">
                <div class = "container">
                <a href= "#" class = "navbar-brand">#</a>
                <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                        <span class = "icon-bar"></span>
                    </button>
                <div class  = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>

<style>
    .nav navbar-nav navbar-right .active a {
        color: yellow; 
    }
</style>

解决方案2：创建CSS文件

将此HTML放入.html文件中：

<head> 
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

创建一个名为main.css的文件，确保它与.html文件放在同一位置，然后将代码放入其中。看起来应该是这样的：

    .nav navbar-nav navbar-right .active a {
        color: yellow; 
    }

如何在bootstrap上更改活动颜色？

3 个答案: