多個CSS類值

Question

我想創建一些CSS，這將允許我創建自己的進度條。

HTML5功能<progress value="10" max="100"></progress>可以工作，但我想自己做。

我的CSS定義.progressbar爲10px寬和10px高（我應該真的將其重命名爲.progressPiece，但可能會晚）。

.progressbar>div { 
    margin:0; 
    padding:0; 
    height:10px; 
    width:10px; 
} 

對於我完成進度的各個部分，我創建了一個類，定義什麼樣的形象來使用：

.start>div { 
    background: url("/images/images/pbStart.gif") right center no-repeat; 
} 

.startGlow>div { 
    background: url("/images/images/pbStartGlow.gif") right center no-repeat; 
} 

.chunk>div { 
    background: url("/images/images/pbChunk.gif") right center no-repeat; 
} 

.motion>div { 
    background: url("/images/images/pbMotion.gif") right center no-repeat; 
} 

.end>div { 
    background: url("/images/images/pbEnd.gif") right center no-repeat; 
} 

.endGlow>div { 
    background: url("/images/images/pbEndGlow.gif") right center no-repeat; 
} 

通過觀察例子，我想下面的代碼段將工作：

<div class="progressbar startGlow"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar end"></div> 

<div class="progressbar start"></div> 
<div class="progressbar motion"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar end"></div> 

<div class="progressbar start"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar motion"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar end"></div> 

<div class="progressbar start"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar motion"></div> 
<div class="progressbar end"></div> 

<div class="progressbar start"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar chunk"></div> 
<div class="progressbar endGlow"></div> 

很顯然，我的文字是不生產我想要的輸出。

我所看到的都是不存在的盒子，如this jsFiddle所示。

爲什麼不能正常工作？

UPDATE：雖然這是現在解決了，我用的這個工作區使用較小的JPEG圖像來開發這個相同的進度條。

Answer 1

您使用的嫡系操作 >但所有的div是空
1. 。刪除您的CSS中的每個>div。
2. 10x10px太小而無法顯示圖像。將.progressbar的width和height增加到100px。
3. 一個div是一個塊級元素，所以你需要float: left您.progressbar

工作小提琴：

http://jsfiddle.net/myajouri/mR2uS/2/

Answer 2

您使用的是父選擇 「>」 在你的CSS，但你所呈現的HTML中沒有父/子關係。您也正在使用DIV顯示應該在一行中顯示的圖像。因爲DIV是塊元素，所以它們需要更改爲SPAN。

這裏是你試圖去

而不是使用背景圖片的工作fiddle，我使用img標籤。默認的標記佈局如下：

<span class="progressbar startGlow"> 
    <img src = "http://i.stack.imgur.com/t9NuV.gif"> 
</span>