为什么我们应该使用 !important？
在 CSS 中，!important 是一个非常重要的关键字，它可以覆盖其他所有样式，优先级最高。也就是说，无论其他样式如何，都会被 !important 样式覆盖。那么我们为什么要使用它呢？
1. 解决不同优先级样式冲突问题
在开发中，有时会出现样式冲突的问题，这时候 !important 就可以派上用场了。比如，我们在定义一个按钮的样式时：
button {
background-color: gray;
color: white;
}
.btn-danger {
background-color: red !important;
color: white !important;
}
当我们给某个按钮添加 .btn-danger 类时，这个按钮会变成红色，即使我们之前已经定义了 gray 背景色，因为 .btn-danger 类样式后面有 !important，它的优先级比前面样式高。
2. 覆盖浏览器默认样式
有些浏览器会对某些元素设置默认样式，比如链接的颜色是蓝色，hover 时是紫色。但是，我们希望它的颜色是我们自定义的，这时候就需要用到 !important。
a {
color: red !important;
}
这样，所有 a 标签的颜色都会变成红色。
3. 优化代码
有时候，我们写样式时会遇到很多嵌套的元素，导致代码很长。这时候可以使用 !important 简化代码。
.container > .row > .col-md-6 > .my-class {
background-color: gray;
color: white;
}
.my-class {
background-color: red !important;
}
这样，我们就只需要在最后一个选择器中加上 !important，而无需重复写之前的样式了。
使用 !important 的注意事项
1. 避免滥用
虽然 !important 很方便，但是滥用它会导致样式难以维护，优先级混乱，并且不利于代码的优化。所以，我们在使用时一定要谨慎，并且尽量避免使用。
2. 优先级问题
!important 即使强制覆盖其他样式，但是它本身也有优先级问题。比如，内联样式 > ID > class > 标签，所以如果两个 !important 样式都是相同的优先级，在同一个元素上应用，那么后面的一个将会覆盖前面的一个。
3. 继承问题
!important 只对直接设置样式的元素有效，如果子元素继承的样式有 !important，那么父元素的 !important 样式将无效。
总结
在开发中，我们经常会使用 !important 来解决样式冲突问题，覆盖浏览器默认样式，以及优化代码。但是，我们也需要注意它的使用方式，避免滥用，以及注意优先级问题和继承问题。