我在html中有一个元素：
<label id="lb">Label1</label>
并在我对应的css文件中：
#lb{
width:100px;
}
我需要覆盖样式。哪种方式最好？
添加内联样式还是可以建议任何其他最好的方法，比如使用css文件中的类而不是内联样式？我想知道最好的做法。提前谢谢。
答案 0 :(得分：4)
答案 1 :(得分：2)
有几种方法可以覆盖css中的样式。 这是第一种方法
label#lb {
background: red;
}
#lb {
background: green;
}
第二种方法是使用!important。
#lb {
background: red !important
}
#lb {
background: green;
}
您可以在此处找到演示：https://jsfiddle.net/zcyep6k1/
背景颜色用于演示。
<强>更新 如果您只想在原始规则之后立即覆盖样式，Caramba的方法会更好。
答案 2 :(得分：2)
覆盖的方法很少，我相信下面的方法是最好的解决方案。
现在代码
#lb{
width:100px;
}
从第一个选项到最后一个选项
<强> 1。请参阅父元素
parentElement #lb{
width:100px;
}
注意：最好继续将父级引用到几个级别，例如：div div div #lb。 直到你没有使嵌套复杂化。
<强> 2。参考身体元素
body #lb{
width:100px;
}
第3。直接使用对元素很重要
#lb{
width:100px !important;
}
<强> 4。使用重要的是直接引用父元素
parentElement #lb{
width:100px !important;
}
<强> 5。使用重要的参考body元素
body #lb{
width:100px !important;
}
尽量避免不惜一切代价使用内联样式，这不是一个好习惯，你应该只在使用JavaScript时使用内联。有些人可能会说，我们可以使用小型解决方案，但我的理解是，从长远来看，它可能真的麻烦你。我建议尽量避免使用内联样式。
答案 3 :(得分：1)
您始终可以在css class / id声明序列中至少使用相同优先级CSS 覆盖它，例如：
HTML：
<label id="lb">Label1</label>
CSS：
#lb{
width:100px;
}
#lb{
width:200px; //this will override 100px
}
最佳实践：
如果您正在使用Bootstrap等外部库，请不要更改其代码，只需将要覆盖的部分的一部分复制到新文件，然后更改新文件并先加载库然后再覆盖css。
答案 4 :(得分：0)
使用！important标签。除非您知道浏览器加载文件时的顺序。
#lb{
width:100px !important;
}
当您使用！important时，您的浏览器会知道“这很重要！”