限制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; 
}

謝謝！

來源

2013-04-07 Abhishek Agrawal

的選擇比需要更復雜，語法不正確 - 您可以通過不使用覆蓋bootstrap.css：

#something .navbar-inner { }

#something .nav li a{ }

#something .nav li a:hover { }

jsFiddle

來源

2013-04-07 00:57:14 Adrift

我才意識到，這並不在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/

來源

2013-10-08 09:52:34 SzKb

限制CSS類樣式只適用於給定的ID

回答

相關問題