通过盒子的背景色演示css权重计算 -

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过盒子的背景色演示css权重计算</title>
<!--     <link rel="stylesheet" href="css/quanzhongdemo.css"> -->
</head>
<body>
<h3>权重001的盒子</h3>
<h3 class="zhegai1">权重011的盒子</h3>
<h3 id="zhegai2">权重100的盒子</h3>
<style>
h3 {
    color:blue
}
/* 0 0 1 ，百位十位均为0，tag位为1 */
h3 {
    color:red
}
/* 011,十位1是class的zhengai1，个位1是类h3 */
h3.zhegai1 {
    color:cyan
}
/* 1 0 0 ，1是ID属性为zhegai2的元素，百位为1，其余位为0 */
#zhegai2 {
    color:darkorange
}
</style>
</body>
</html>
![](https://img.php.cn/upload/image/800/702/260/1676177462992382.png)