CSS——优先级

样式优先级：默认样式<标签选择器<类选择器<id选择器<行内样式<!important

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main {
            font-size: 80px;
            color: blue;
        }
        .box {
            font-size: 40px !important;
            color: yellow;
        }
        div{
            font-size:20px;
            color:red;
        }      
    </style>
</head>
<body>
    <div class="box" id="main" style="font-size:120px;color:gray">哈哈</div>
</body>
</html>

注释：上述代码为了屏蔽样式的层叠性，样式表都是反浏览器渲染的过程书写的，最后还是以标注了!important的标签选择器为为主。

优先级特点:

1、继承的权重为0

2、权重会叠加

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #main #part {
            font-size: 380px;
            color: blue;
        }

        #main .son {
            font-size: 180px;
            color: gray;
        }

        .father .son {
            font-size: 160px;
            color: yellow;
        }

        p.son {
            font-size: 120px;
            color: green;
        }

        p {
            font-size: 80px;
            color: blue;
        }

        .father {
            font-size: 40px;
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="father" id="main">
        <p class="son" id="part">哈哈</p>
    </div>
</body>
</html>

注释：

1、在样式表中子元素如果已经拥有此样式，父元素的样式不会再覆盖子元素的样式。

2、权重的叠加：#main #part> #main .son>.father .son> p.son>p>.father