修改带!important的css样式

讲解决方法之前，先普及一下css样式里优先级的一些知识，避免一些刚入行的小白看的迷迷糊糊。

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

优先级规则：

　　　1.css选择规则的权值不同时，权值高的优先；

　　　2.css选择规则的权值相同时，后定义的规则优先；

　　　3. css属性后面加 !important 时，无条件绝对优先；

当然，记不住也没关系，毕竟写样式时最常用的方法就是直接在css属性后面添加一个 !important，使其绝对优先。

不过这样也会出现一个问题，那就是JS里常用的更改样式方法无效

js修改方法

js常用方法：元素名.style.属性名='值';
例如：var btn=document.getElementsByTagName('button'); btn.style.background='red';
这样是无效的。

而想要更改他，就需要使用setProperty()方法。
setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。

如：var btn=document.getElementsByTagName('button'); btn.style.setProperty('background','red','important');
注：setProperty()的第三个参数没有 !

jq修改方法

常用的css修改方法
$(".test").css("width","100px !important");
但这种方法是错误的。

而想要强制修改，需要添加cssText
例子：
$(".test").css("cssText", "50px !important;);

方法亲测有效，质量有保障！