CSS3中id与class的优先级？

如果CSS3中一个元素同时定义了id和class，由于id的优先级比class的优先级高，所有显示的是id的属性，而不是class的属性，或者说，id里的属性把class里的属性覆盖掉了，就像z-index的层叠效果一样。

举个例子：

<!doctype html>
<html>
<head>
    <style>
        .case1{border:solid 5px red;}
        #case2{border:double 5px yellow;}
    </style>
</head>
<body>
    <p class="case1" id="case2">This is a test!</p>
</body>
</html>

（ps：使用HTML5的代码比HTML4.x的代码要简介多了，如果是前端工程师的你不了解HTML5，你就OUT了，亲）

在此，html5代码内嵌了css3代码，css3中同时定义了class：“.case1”和id：“#case2”，两者的属性值不同，执行这段代码你会知道，浏览器显示的是id的属性值，而把class定义的属性值忽略掉了，或者说覆盖掉了。

（ps：如何执行上面的代码？创建一个txt文本文档，把上面的代码复制进去，保存，然后把文件后缀名.txt改为.html ，然后双击它就可以了。）

另外，id也作为一个元素的“×××号码”，是唯一的，在js中可以通过getElementById（case2）获取该id的元素；而class作为一类元素的“识别码”，不一定是唯一的，在js中可以通过getElementByTagName获取该class的元素（更多的详情请百度之）。