@Shmiddty对这个问题的评论让我开始思考，因此我一直在研究代码并找到了解决方案。
问题出在
header声明上。通过反转CSS和JS外部文件调用的顺序（即，将CSS放在JS之前），颜色转换将在页面加载时停止触发：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/main.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="js/main.js"></script></head>
我的猜测是，在DOM准备就绪后，JS的加载将CSS的加载延迟了。到那时（如@Shmiddty所建议的那样），文本已被分配了默认的浏览器颜色，然后使用我的CSS
transition声明淡入其样式颜色。
**我仍然不确定这是否是最合适的方法，但是它可以工作。如果有人有更好的解决方案，请随时添加或编辑。
