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

Question

谁能告诉我为什么我的标签样式通过标签标签的类仅在我第一次通过 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>

Answer 1

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

阅读更多：http ://www.w3.org/TR/CSS2/cascade.html

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

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

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

Answer 2

如果您希望所有标签都相同，请执行以下操作

label {
border:5px solid red;  
 } 

如果您想进一步专门化特定的，请使用类或 ID。

Answer 3

改变：

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

至：

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

它会正常工作。

见这里：http: //jsfiddle.net/2SFbY/