我们在点击超链接的时候，会发现
这四个状态，链接的文本会发生不一样的状态，这样的效果就是用CSS的伪类选择器来实现。
正确的CSS顺序应该是
Why?
因为这四个CSS的优先级是一样的，所有后者会覆盖前者。
从实现的步骤来分析，就应该是这样排列才对。
用户的操作步骤是
1. 还没有点击链接
那么只有 a:link 这一条样式生效，用户看到的是没有点击的样式。
2. 鼠标移上去悬浮在链接上
那么 a: link 和 a: hover 这两条生效，由于 a: hover 在后面，所以样式3覆盖了样式1，显示的是鼠标移上去悬浮在链接上这个样式
3. 鼠标按了下去
那么 a:link 、 a:hover 和 a:active 这三条生效， a:active 覆盖了前两者，显示出来的就是鼠标点击时候的样式。
4. 点击完发生链接之后
那么 a: visited 这一条永久生效，显示出来的就是链接后的样式。
总之，必须是，
1、在html中定义一个dom元素，比如div。
2、给div添加一个onclick事件，同时定义一个响应事件的js函数。
3、在js函数中获取该div元素,通过document.getElementById()方法
4、通过元素的style属性中backgroundColor属性即可修改背景色。
示例：
//刚开始默认颜色白色
<div id="mydiv" style="width:200pxheight:200pxborder:1px solid black" onclick="changeBackground()"></div>js函数：
<script type="text/javascript">function changeBackground(){
var mydiv = document.getElementById('mydiv')
mydiv.style.backgroundColor="blue"
}
</script>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.changeColor2Pink{
background-color: pink
}
.resetBtn1Color{
background: none
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn1=document.getElementById("btn1")
var btn2= document.getElementById("btn2")
btn1.onclick = function () {
btn1.className="changeColor2Pink"
}
btn2.onclick = function () {
btn1.className = "resetBtn1Color"
btn2.className = "changeColor2Pink"
}
}
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</body>
</html>
