Css 设置到达它的HTML5进度标记样式'；s最大值

在CSS中，是否可以将达到其最大值的progressbar与尚未启动或已启动的progressbar进行不同的样式设置

比如说做一些像

progress[max=value] {
background: green // color when maxed out
}
progress {
background: red;//default color
}

---

或者我必须使用Javascript来检测它吗？

我还希望看到

元素完成状态的一些伪类，因为浏览器（OS X上的Chrome和Firefox）已经知道何时完成并相应地更改外观

不幸的是，唯一的伪类

似乎支持的是

:undeterminate

，即未设置

值

当然，您可以自己使用JavaScript并添加一些类（但您甚至不能在
上侦听
更改
事件）：

演示：
这个答案假设我们知道进度条的最大值。我将使用以下标记：



我们这里的进度条最大值为100，最大值为100，这意味着它处于完成状态。由此，我们可以使用将其定位在其完成状态：

progress[value=“100”]{…}

Chris Coyier有一篇文章解释了如何在Chrome、Firefox和IE10中设置
progress
元素的样式。接下来，我们可以将样式应用于完成的进度条。首先，我们重置样式：

progress[value=“100”]{
-webkit外观：无；
-moz外观：无；
外观：无；
}

然后我们可以专门将样式应用于
：：-webkit进度值
和
：-moz进度条
，以定位Chrome和Firefox上的前台进度条。为此，我将背景颜色设置为
#f00
（红色）：

/*Chrome*/
进度[value=“100”]：-webkit进度值{
背景：#f00；
}
/*火狐*/
进度[value=“100”]：-moz进度条{
背景：#f00；
}

最后，我们只需在主选择器上添加一个
color
属性，即可添加IE10样式：

progress[value=“100”]{
-webkit外观：无；
-moz外观：无；
外观：无；
/*IE10*/
颜色：#f00；
}

下面是一个用两个进度条来演示这一点的示例-第一个进度条为50%，第二个进度条为100%。对于懒惰的人，以下是Chrome、Firefox和IE10的结果：

为什么不能检查进度条的值并添加CSS类，如果它是100%？@gurpreitsingh-AIUI没有要求
progress
元素的
max
为100。是的，我认为这是目前可用的最佳选项，托巴德：现在还不可能百分之百地做到这一点css@RobbertStevens有人应该为此打开一个请求。谢谢你的评论，糟糕的是，我不知道进度条的最大值。当然，我可以计算它们，它甚至可以在动态更新
值时工作：糟糕的是，它只适用于预定义的最大值。
var progress = document.querySelector('progress');

// then somewhere inside a callback

if (progress.value === progress.max) {
    progress.classList.add('finished');
} else {
    progress.classList.remove('finished');
}