以下代码按照优先级原则，第一行字是显示红色，第二行字显示绿色，第三行字显示蓝色，为什么运行后都是红色呢？请哪位同学帮忙解疑一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器优先级</title>
<style type="text/css">
div{color:red;font-size:20px;}
div .green{color:green;font-size:30px;}
div #blue{color:blue;font-size:25px;}
</style>
</head>
<body>
<div>前端CSS选择器优先级的学习</div><!--补充代码-->
<div class="green">前端CSS选择器优先级的学习</div>
<div id="blue">前端CSS选择器优先级的学习</div>
</body>
</html>