用JS改变页面中b标签的样式啊样式的等

用JS改变页面中b标签的样式啊样式的等，实际上是在标签内加上样式，用媒体查询的话，不能生效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        @media screen and (max- 1000px) {
    div {
        color:lightblue;
    }
}
@media screen and (max- 800px) {
    div {
        color:pink;
    }
}
@media screen and (max- 600px) {
    div {
        color:purple;
    }
}


	</style>
</head>
<body>
	<div class="dv">每天你和阳光都在</div>
	<button>点我</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	 $('button').on('click',function(){
	 	 $('.dv').css('color',"red");
	 })
</script>
</html>

　　至于为什么？原因在于，当用JS执行的时候，是在标签内加的样式，权限很大，而用媒体查询的时候，还是CSS的标签的权限，就是div的权限，很显然，权限不够，覆盖掉标签内的权限，所以当JS执行的时候，即使上面有媒体查询的样式还是不能生效的。

把上面的代码运行一下，F12就可以知道原因了。

用JS改变页面中b标签的样式啊 样式的等

用JS改变页面中b标签的样式啊样式的等