!important的用法

CSS / 2024年9月10日 / hamster

!important 是 CSS 中的一个关键字，用来提高某条声明的优先级，使其在与其它规则发生冲突时仍然生效。

当两个或多个 CSS 规则应用于同一个元素并且它们具有相同的权重，浏览器会应用最后定义的规则。但是，如果其中一个规则带有 !important 标志，那么无论它在样式表中的位置如何，都将优先于其他规则应用。

使用 !important 可以覆盖内联样式、内部样式表以及外部样式表中定义的样式。然而，另一个带有 !important 并且具有更高或相等重要性的声明可以覆盖它。

虽然 !important 在某些情况下非常有用，比如在开发过程中快速调试或在无法修改某些样式文件的情况下进行局部覆盖，但在生产环境中应谨慎使用。过度使用 !important 可能会导致样式难以维护，因为它可以打破正常的层叠关系，并使得定位和解决问题更加困难。

/* 外部样式表中的样式 */
p {
    color: blue;
}

/* 内部样式表或 <style> 标签内的样式 */
p {
    color: red !important;
}

/* 内联样式 */
<p style="color:green !important;">这段文字将显示为绿色。</p>

注意：

后续测试发现，!important在H5页面中运用没有问题，但若是在vue中运用，则没有效果。最后找到原因，大多因为封装组件的缘故，你实际要修改的样式可能被组件类名层层包裹，所以才没有达到效果，这时就需要:deep()的帮助。

<style lang="scss" scoped>
:deep(){
    .text-color{
        color:green !important;
    }
}
</style>

:deep() 是Vue 3中的一种深作用域样式的方法，用于穿透封装组件的样式作用域，从而允许对深层嵌套的元素应用样式。

在Vue 2中，这通常是通过 /deep/ 或 >>> 实现的。

Vue3