用JS添加一些CSS属性导致：hover失效

#add{宽度：50px；高度：50px；background-color:greenyellow;}#add:hover{background-color:#000;}----------------------左边的图片是默认的，和右图是鼠标放在上面的时候。现在悬停仍然可以正常显示。（下图默认左侧hover在右侧）但是如果通过js插入css样式，鼠标放上的hover样式是不会生效的。varadd=document.getElementById("add");add.style.backgroundColor="red";现在hover中设置的#000属性无效。但这并不是hover伪类的丢失效果。如果设置的不是js添加的样式，可以看到hover没有失效。例如，尝试添加字体颜色。------------------#add:hover{背景颜色：#000;color:yellow;}------------------------可以看到字体颜色还是会变的。原因是在html标签的样式上应该直接在js中添加css样式，样式的优先级高于css伪类。从上到下的样式、悬停、id选择器。在浏览器调试工具中可以看到直接在样式中添加了js。所以我该怎么做？不知道css优先级的朋友可以先看博客园大牛写的一篇关于css优先级的文章。它讨论了选择器的优先级。但是并没有讲到css伪类和样式的优先级。但是:hover伪类也失败了。说明style>css伪类>id>class。只需在:hover属性后添加!important即可。它应该是!important优先级高于一切！！!important>style>css伪类>id>class。#add:hover{background-color:#000!important;}--------------------现在终于达到了想要的效果