Множество значений класса CSS

Question

Я пытаюсь создать некоторый CSS, который позволит мне создать свой собственный индикатор выполнения.

Функция HTML5 <progress value="10" max="100"></progress> будет работать, но я хочу сделать это сам.

Мой CSS определяет .progressbar шириной 10 пикселей и высотой 10 пикселей (я действительно должен переименовать ее в .progressPiece, но это может произойти позже).

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

Для каждого раздела моего завершенного ProgressBar, я создал класс, который определяет, какое изображение использовать:

.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

1. вы используете прямой потомок оператора > но все ваши дивы пусты. Удалите каждый >div в своем CSS.
2. 10x10px слишком мал, чтобы показывать ваши изображения. Увеличьте width и height от .progressbar до 100px.
3. div является элементом уровня блока, так что вам нужно float: left вашего .progressbar

Работы скрипки:

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

Answer 2

Вы с помощью родительского селектора ">" в ваш CSS, но нет родительских/дочерних отношений в HTML, который вы представили. Вы также используете DIV для отображения изображений, которые должны отображаться в одной строке. Они должны быть изменены на SPAN, поскольку DIV являются блочными элементами.

Вот рабочий fiddle того, что вы пытаетесь добраться до

Вместо использования фоновых изображений, я использовал IMG тег. макет разметки по умолчанию является следующее:

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