css - 样式化CSS标签中的内容

谁能告诉我为什么仅当我第一次通过id定义样式时，通过标签标记类的标签样式才能起作用？

这是我的示例：

为什么这样做会使边框变成绿色：
http://jsfiddle.net/HxrSU/13/

但是，当我通过ID删除样式时，这不是吗？
http://jsfiddle.net/HxrSU/14/

这是完整的代码，来自http://jsfiddle.net/HxrSU/13/的代码

<style type="text/css">
#red {
border: thick dotted red;
}

.label-for-check {
border: thick solid green;
}
</style>

<input type="checkbox" id="check" class="check-with-label" />

<label for="check" id="red" class="label-for-check">
 MyField
<input type='text' id='myfield' name='myfield' size='10'  />
</label>

最佳答案

ID的CSS语句的优先级（特异性）高于类。

了解更多：http://www.w3.org/TR/CSS2/cascade.html

用类语句覆盖ID语句的一种方法是包括来自共同祖先的ID：

http://jsfiddle.net/HxrSU/25/

#page .label-for-check {
    border: thick solid green;
}