关于CSS伪类特性和CLICK等事件的冲突解决方案

在下面这种情况：

...
<a href="#" id="link">点击我</a>
<style>
    #link:hover{
        color: rgb(253,248,0);
    }
</style>

这段代码简单的设置了一个链接的hover鼠标悬停伪类样式，但是如果我们加入下面这段代码的话:

<script>
    window.onload = function() {
        document.getElementById("link").onclick = function() {
            ...
        };
    };
</script>

这是用于定义该链接的click事件的，当同时定义一个链接的click事件和CSS伪类时，当进行了事件的点击之后，我们会发现其伪类样式失效了，这是因为他们之间相互冲突

解决的办法是将CSS伪类定义的属性提高一个优先级，这样一来，就迎刃而解了

...
<style>
    #link{
        background-color: red !important;
    }
</style>
<script>
    window.onload = function(){
        document.getElementById("link").onclick=function(){
            ...
        };
    };
</script>