Сдерживание стилей стилей CSS применимо только к данному id

Question

Я пытаюсь использовать два навигатора Twitter Bootstrap на одной странице. Я написал несколько CSS для их стилей. Проблема в том, что я хочу, чтобы css применялся только к одному из навигаторов. Я попытался использовать css-идентификаторы, чтобы отличить два навигатора, но у меня проблемы с правильными выборами. Может ли кто-нибудь помочь?

Вот упрощенная версия того, что я пытаюсь сделать: 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/