在下面这种情况:
...
<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>