Question

任何人都可以告诉我为什么我的标签样式通过标签标签的类只在我第一次通过id定义样式时才有效吗？

以下是我的例子：

为什么这样可以将边框变为绿色： http://jsfiddle.net/HxrSU/13/

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

中的代码

<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/

在CSS标签内设置样式

3 个答案: