CSS层叠样式表与优先级

最新推荐文章于 2024-08-15 15:20:23 发布

没时间喽

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量173

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： css 数学建模 html 前端

本文链接：https://blog.csdn.net/Z15800020057/article/details/131390540

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

层叠性

CSS层叠样式表具有后写的样式覆盖前面样式的特性，对与层叠性，只会对相同的属性进行覆盖，不同的属性会进行保存下来；

优先级

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                color: yellow;
            }
            div{
                color: #0000FF !important;
            
            }
            .aaa{
                color: #008000;
                font-size: 70px;
            }
            #bbb{
                color: #987655;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <!-- 
            !important>行内样式>id选择器>类选择器>标签选择器>全局选择器>内置样式>继承
         -->
        <div class="aaa" id="bbb" style="color: red;">
            我是验证优先级的
        </div>
        <span>
            我是一个小span
        </span>
        <div>
            我是验证优先级的test01
        </div>
    </body>
</html>

!important>行内样式>id选择器>类选择器>标签选择器>全局选择器>内置样式>继承

!important会对一条属性进行标记，可以根据英文意思理解就是重要的，!重要的表示非常重要，所标记的属性的优先级是最大的。