css多个!important保证新样式⼀定覆盖原样式⽅法
前⾔
⼀般来说，我们在项⽬初期不会造成多 !important 的问题，⽽在陈年项⽬中，我们再去修改原代码的样式 css ⽂件已经不太现实，花费⼤量时间还容易造成未知的错乱。
为了保证样式⼀定可控，也就是加⼊的新样式⼀定覆盖原样式，可以采⽤如下⽅法。
解决
先看⼀段例⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
color: red !important;
}
.child{
/* 越近的节点可以覆盖上级 */
color: blue !important;
}
div{
/* ⽆效 */
color: green !important;
}
.child{
/* 有效 */
color: pink !important;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
这是⼀段⽂字
</div>
css最新</div>
</body>
</html>
从⽽得之：
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 选择器最后⼀个加载的样式为准。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。