html - 多个 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;
}

对于我完成的进度条的每个部分，我都创建了一个类来定义要使用的图像:

.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所示.

为什么这行不通？

更新:虽然这个问题现在已经解决了，但我正在使用这个工作区使用较小的 jpeg 图像开发相同的进度条。

Answer 1

1. 您正在使用直接后代运算符 > 但您的所有 div 都是空的。删除 CSS 中的每个 >div。
2. 10x10 像素太小，无法显示您的图片。将 .progressbar 的 width 和 height 增加到 100px。
3. div 是 block 级元素，因此您需要float: left 您的 .progressbar

工作 fiddle :

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