2

我正在尝试在同一页面上使用两个 Twitter Bootstrap 导航。我写了一些 CSS 来设置它们的样式。问题是，我希望 css 仅适用于其中一个导航。我尝试使用 css id 来区分两个导航，但无法正确选择选择器。任何人都可以帮忙吗？

这是我正在尝试做的简化版本：http: //jsfiddle.net/XVReX/

HTML：

<div id="something" class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li id="selectEventStep"><a>Select Event</a>

                </li>
                <li id="selectPriceStep"><a>Select Price</a>

                </li>
                <li id="confirmSwapStep"><a>Confirm Swap</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li id="selectEventStep"><a>Select Event</a>

                </li>
                <li id="selectPriceStep"><a>Select Price</a>

                </li>
                <li id="confirmSwapStep"><a>Confirm Swap</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS：

#something.navbar #something.navbar-inner {
    padding: 0;
    background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);
}
#something.navbar #something.nav li a {
    font-weight: bold;
    text-align: center;
    color: #FFE2E0;
    text-shadow: 0 1px 0 #000;
    ;
}
#something.navbar #something.nav li a:hover {
    color: #fff;
}

谢谢！

4

2 回答 2

0

选择器比必要的更复杂，并且语法不正确 - 您可以使用以下命令覆盖 bootstrap.css：

#something .navbar-inner { }

#something .nav li a{ }

#something .nav li a:hover { }

jsFiddle

于 2013-04-07T00:57:14.843 回答
0

我重写了整个样式表，使用 sass 编译器和正则表达式仅将样式应用于具有类名 .bootstrap 的那些元素，如下所示

 audio.bootstrap:not([controls]) {
  display: none;
}
 html.bootstrap {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
 a.bootstrap:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

我还没有检查一切，但我认为它工作正常。

http://jsfiddle.net/Lc5h6/

于 2013-10-08T09:52:34.490 回答