我想在同一页上使用两个Twitter Bootstrap导航。我写了一些CSS来设计它们。问题是,我希望CSS只适用于其中一个导航。我试图使用CSS ID来区分这两个导航,但是无法正确选择选择器。谁能帮忙?限制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;
}
谢谢!
我才意识到,这并不在IE工作,有什么建议? – 2013-04-18 16:29:39
对不起刚才意识到我使用的webkit渐变不适用于非webkit浏览器 – 2013-04-18 16:46:07