Question

我正在尝试在同一页面上使用两个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;
}

谢谢！

Answer 1

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

#something .navbar-inner { }

#something .nav li a{ }

#something .nav li a:hover { }

jsFiddle

Answer 2

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

 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/

约束CSS类样式以仅应用于给定的id

2 个答案: