爲旋轉木馬物品設置不同的bg顏色

Question

我正在Bootstrap網站上的旋轉木馬示例代碼上工作。 我想爲傳送帶中的每個項目設置不同的背景顏色。 我爲設置背景顏色的每個項目使用額外的css類。然而，我能夠實現它的唯一方法就是設置重要的標誌。

什麼是更好的處理方法，特別是沒有重要的標誌？

這裏的HTML：

<div id="myCarousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="2" class="active"></li> 
     </ol> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Example headline.</h1> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
         <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="item second"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Second headline.</h1> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
         <p><a class="btn btn-large btn-primary" href="#">Sign up tomorrow</a></p> 
        </div> 
       </div> 
      </div> 
      <div class="item third"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Third headline.</h1> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
         <p><a class="btn btn-large btn-primary" href="#">Never sign up</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

和這裏的CSS：

.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 

.second{ 
    background-color: #f00 !important; 
} 

.third { 
    background-color: #0f0 !important; 
} 

Answer 1

可能需要添加重要看是否適合我前一段時間的工作，但每一個身體系統不同

<div class="item one bg1"> 
<div class="item second bg2"> 
<div class="item third bg3"> 

.carousel .item .bg1 { 
    background: green; 
} 
.carousel .item .bg2 { 
    background: red; 
} 
.carousel .item .bg3 { 
    background: blue; 
} 

Answer 2

.carousel .item { 
    height: 500px; 
} 

.active { 
    background-color: #777; 
} 

.second{ 
    background-color: #f00; 
} 

.third { 
    background-color: #0f0; 
} 

Don'爲.carousel .item分配一個Backgroun Color，因爲它的特殊性比其他的大。這就是爲什麼你需要使用！重要的。

檢查小提琴出來 - >http://jsfiddle.net/XVBqJ/1/