css权重计算

时间:2020-05-01

每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称“权值。

css优先级按以下规则

  1. css选择规则的权值不同时,权值高的优先
  2. css选择规则的权值相同时,后定义的规则优先
  3. css属性后面加 !important 时,无条件绝对优先

css权值:

  1. 内联样式:1000
  2. ID选择器:100
  3. Class选择器:10
  4. 标签选择器:1
  5. 其它:0

开始测试

html结构

<div id="box" class="box">
    <p>
        css
    </p>
</div>

样式

<style type="text/css">
        div#box p {
            color: red;
        }

        div.box p {
            color: green;
        }
</style>

假设有!important

<style type="text/css">
        p {
            color: orange !important;
        }

        div#box p {
            color: red;
        }

        div.box p {
            color: green;
        }
</style>

修改html结构

<div id="box" class="box">
    <p id="p" class="p">
        css
    </p>
</div>

修改样式

<style type="text/css">
        .box p {
            color: red;
        }

        div #p {
            color: green;
        }
</style>

修改样式,权重相同

<style type="text/css">
        #box p {
            color: red;
        }

        div #p {
            color: green;
        }
</style>

再次修改样式

<style type="text/css">
        #box p {
            color: red;
        }

        #p {
            color: green;
        }
</style>

测试内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box p {
            color: red;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <p id="p" class="p" style="color:green;">
        css
    </p>
</div>
</body>
</html>

权重计算示例

#box p  =  100 + 1 = 101

.box p#p = 10 + 1 + 100 = 111