覆盖id给出的元素的CSS样式

Question

我在html中有一个元素：

<label id="lb">Label1</label>

并在我相应的CSS文件中：

#lb{
width:100px;
}

我需要重写样式。最好的方法是什么？

添加内联样式还是可以建议其他最佳方法，例如使用css文件中的类而不是内联样式？我想知道最好的做法。提前致谢。

Answer 1

这取决于几件事。但是实际上，您添加了具有相同样式的选择器，之后只需要几行就可以了。正如CSS所说，它从上到下层叠。因此，如果特异性相同，则最后一条规则将被采用/添加到先前设置的规则中。另外，如果您包括整个CSS文件。

#lb {
   width:100px;
   background-color: green;
}

#lb {
    background-color: orange;
}

<label id="lb">Label1</label>

如果这样做不能解决问题，您应该阅读CSS特殊性，它将解释为什么以及何时使用哪些选择器，从而适用样式。

那也说那inline-styles是不好的做法。因此，除了添加内联样式之外，您还可以添加一个类名：

#lb {
   width:100px;
   background-color: green;
}

#lb {
    background-color: orange;
}

#lb.my-class {
    background-color: fuchsia;
}

<label id="lb" class="my-class">Label1</label>

但是现在，如果您不了解特异性，您将无法理解为什么下一个示例也fuchsia带有颜色

#lb.my-class {
    background-color: fuchsia;
}

#lb {
   width:100px;
   background-color: green;
}

#lb {
    background-color: orange;
}

<label id="lb" class="my-class">Label1</label>

快乐的编码。