Css Twitter引导导航单个菜单项颜色

Css Twitter引导导航单个菜单项颜色,css,wordpress,twitter-bootstrap,Css,Wordpress,Twitter Bootstrap,我正在使用Wordpress的Bootstrap。 我的导航栏项目输出良好,但我希望每个单独的菜单项是不同的颜色。引导假定所有菜单项都具有相同的初始、活动和悬停颜色。 我希望我的活动菜单颜色不同。这可能吗 我试图在css中定位当前的页面,但似乎没有覆盖defaul twitter.navbar inverse.nav.active>a,definition。有什么想法吗?下面的代码 <div class="navbar navbar-inverse navbar-fixed-top">

我正在使用Wordpress的Bootstrap。 我的导航栏项目输出良好,但我希望每个单独的菜单项是不同的颜色。引导假定所有菜单项都具有相同的初始、活动和悬停颜色。 我希望我的活动菜单颜色不同。这可能吗

我试图在css中定位当前的页面,但似乎没有覆盖defaul twitter.navbar inverse.nav.active>a,definition。有什么想法吗?下面的代码

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
    <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="#">Menu Item 1</a></li>
    <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-52 current_page_item active menu-item-85"><a href="#">Menu Item 2</a></li>
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="#">Menu Item 3</a></li>
</div>


  • 您可以使用分配的id针对每个人
  • #menu-item-73 > a,
    #menu-item-73.active > a {
        background: red;
    } 
    
    但是,如果您的页面/帖子更改了id,上述css选择器将无效

    看看这本书

    或在较少的文件中:

    .navbar .navbar-inner > .active {
       > a, > a:hover, > a:focus {
          // your style
       }
    }
    
    更新
    尝试在变量中突出显示
    @navbabackgroundhighlight
    。减少

    我使用的是bootstrap,在我开始新项目之前,我在几个文件中更改了
    @import“variables.less”到新变量文件,我在其中更改所有变量。接下来,我创建一个新文件夹,其中有我的
    变量.less
    样式.less
    ,在
    样式中。less
    我包括3个文件:

    /*
    Theme Name: name
    Theme URI: http://www.domain.co.uk/
    Description: Template for your website.
    Author: me
    Author URI: http://www.domain.co.uk/
    Version: 1.0
    
    General comments (optional).
    */
    @import "variables.less";
    @import "../../_scripts/bootstrap/less/bootstrap.less";
    @import "../../_scripts/bootstrap/less/responsive.less";
    
    // your own css code
    .header { .. }
    

    我只编译
    style.less
    ,它给了我
    style.css
    文件

    这就是我试图颠覆的风格。有可能覆盖这个吗?这是完美的,因为id不会改变。我不知道我能如此直接地被李瞄准。非常感谢!
    /*
    Theme Name: name
    Theme URI: http://www.domain.co.uk/
    Description: Template for your website.
    Author: me
    Author URI: http://www.domain.co.uk/
    Version: 1.0
    
    General comments (optional).
    */
    @import "variables.less";
    @import "../../_scripts/bootstrap/less/bootstrap.less";
    @import "../../_scripts/bootstrap/less/responsive.less";
    
    // your own css code
    .header { .. }