2023年6月21日发(作者：)

css多个!important保证新样式⼀定覆盖原样式⽅法前⾔⼀般来说，我们在项⽬初期不会造成多

!important 的问题，⽽在陈年项⽬中，我们再去修改原代码的样式 css ⽂件已经不太现实，花费⼤量时间还容易造成未知的错乱。为了保证样式⼀定可控，也就是加⼊的新样式⼀定覆盖原样式，可以采⽤如下⽅法。解决先看⼀段例⼦： Document

这是⼀段⽂字
从⽽得之：1. 越近的节点

!important 样式越优先。2. 同名 css 选择器，在都是

!important 情况下，总是新样式覆盖旧样式。为了保证新样式⼀定覆盖原

!important 样式，⼀定要把 css 选择器写成和要覆盖的 css 选择器同名。再举⼀例：/*

原样式 */#id input[type="text"] .class-name { margin: 10px !important;}/*

新样式 */#id input[type="text"] .class-name { margin: 20px !important;}只有同名才会保证覆盖原

!important 是⼀定成功的。根据

.css ⽂件的加载顺序不同，甚⾄可以按

.css ⽂件加载顺序有⽆数个

!important 出现，但总是以同名的 css 选择器最后⼀个加载的样式为准。

2023年6月21日发(作者：)

css多个!important保证新样式⼀定覆盖原样式⽅法前⾔⼀般来说，我们在项⽬初期不会造成多

!important 的问题，⽽在陈年项⽬中，我们再去修改原代码的样式 css ⽂件已经不太现实，花费⼤量时间还容易造成未知的错乱。为了保证样式⼀定可控，也就是加⼊的新样式⼀定覆盖原样式，可以采⽤如下⽅法。解决先看⼀段例⼦： Document

这是⼀段⽂字
从⽽得之：1. 越近的节点

!important 样式越优先。2. 同名 css 选择器，在都是

!important 情况下，总是新样式覆盖旧样式。为了保证新样式⼀定覆盖原

!important 样式，⼀定要把 css 选择器写成和要覆盖的 css 选择器同名。再举⼀例：/*

原样式 */#id input[type="text"] .class-name { margin: 10px !important;}/*

新样式 */#id input[type="text"] .class-name { margin: 20px !important;}只有同名才会保证覆盖原

!important 是⼀定成功的。根据

.css ⽂件的加载顺序不同，甚⾄可以按

.css ⽂件加载顺序有⽆数个

!important 出现，但总是以同名的 css 选择器最后⼀个加载的样式为准。