今天刚刚接触css，在验证css层叠性时发现了一个奇怪问题，代码如下：
<!--css规则特性-->
<!DOCTYPE html>
<html>
<head>
<title>css规则特性</title>
<style type="text/css">
<!--继承性-->
body {
font-family:'微软雅黑';
}
<!--层叠性-->
h1 {
color:red;
}
h1 {
background-color:silver;
}
<!--优先级-->
p {
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>AAA</h1>
<p>BBB</p>
</body>
</html>
在层叠性部分写了两个h1，是为了验证层叠性。然后奇怪的问题来了：
两个特性中只会显示第二个h1的效果，也就是说如果我把这两个h1换个位置，则效果也互换了；如果我删除其中一个h1，那么这个单独的h1也没有效果。
这真是一个好奇怪好奇怪又好费解的问题呀！
三种情况图片如下：
原代码情况下：
交换h1位置情况下：
在删除其中一个h1后：
这个小问题好奇怪好费解，好想知道答案！！！
