这两天在做HTML的东西,就顺便研究了一下这个问题。下面是一段测试代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""><style>
div{
border-style:dotted;
width:40%;
height:60%;
}
.div1{
border-color:red;
border-width:10px;
}
.div2{
border-color:blue;
}
div{
border-style:dotted;
width:60%;
height:40%;
}
</style></HEAD>
<BODY>
<div class="div3 div1 div4 div2 ">ddd</div><div>
<style>
div{
border-style:dotted;
width:60%;
height:40%;
}
.div2{
border-color:yellow;
}
.div4{
border-color:red;
}
</style>
<link type="text/css" href="a.css" rel="stylesheet" />
<div class="div3 div1 div2 ">ddd</div>
</div></BODY>
</HTML>
a.css代码
.div3{
border-color:black;
margin-left:20px;
}
经过测试发现,CSS的优先级与class中写的前后顺序无关(class="div3 div1 div2 div4"), 而与这些Style的加载前后顺序有关。如第一个DIV, Style中包括 div2 和div4。 对于border-color这个属性来说,div4后于div2加载,所以应该是red。但div3 Style是最后加载的,所以显示颜色应该是black。
同时发现,CSS的加载是全局的。不论对CSS的引用是在Div中,还是页面最后。如果有重复加载的CSS, 最后一次加载会覆盖前面的加载(一样,最后加载优先)。后加载的CSS中,如果有Style名字与前面相同的,会全局覆盖前面的Style内容。
下面是Javascript测试代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT=""><script>
var globalB = "B"
function testA(){
alert("This is test a." + globalB);
}
</script>
</HEAD><BODY>
<div>
<input type="button" onclick="testA(); return false" value="Test" width="30px" height="20px" />
</div>
<table><tr><td>
<script>
var globalB = "another B"
function testa(){
alert("this is another test a." + globalB);
}
</script>
<div>
<script type="text/javascript" src="b.js"></script>
</div>
</td></tr></table></BODY>
</HTML>
b.js内容:
var globalB = "B in js"
function testA(){
alert("This is test a in js file." + globalB);
}
测试发现,javascript的加载也是全局的。也就是说javascript不论在哪里加载,都是全局的。在代码中,可以调用当前元素之后加载的script。而如果有同名函数或同名全局变量的话,后加载的会覆盖前面加载的。另外发现<script />的写法IE不支持,必须是<script></script>。