限制CSS类样式只适用于给定的ID

问题描述：

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

谢谢！

答

的选择比需要更复杂，语法不正确 - 您可以通过不使用覆盖bootstrap.css：

#something .navbar-inner { }

#something .nav li a{ }

#something .nav li a:hover { }

jsFiddle

我才意识到，这并不在IE工作，有什么建议？ – 2013-04-18 16:29:39

对不起刚才意识到我使用的webkit渐变不适用于非webkit浏览器 – 2013-04-18 16:46:07

答

我重写了她的整个风格等应用的样式只与类名的那些元素.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

相关推荐