css权重

最新推荐文章于 2022-08-08 23:00:49 发布

zp1996323

最新推荐文章于 2022-08-08 23:00:49 发布

阅读量976

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zp1996323/article/details/49853693

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css权重是一个很基础的问题，我们应该很清楚这个问题。
css权重可以按照俩种方式来区分，
（一）按照css的引入方式
内嵌样式>内部样式表>外联样式表
测试一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css权重</title>
        <link rel="stylesheet" type="text/css" href="test.css">
        <!-- 在test.css内指定了文字颜色为红色-->
        <style type="text/css">
            #test{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="test" id="test" style="color:green">
            <div class="compare" id="compare">这是一个测试啊,猜猜这个颜色是神马颜色啊</div>
        </div>
    </body>
</html>

根据测试我们可以看到得到了绿色的文字，这也验证了我们上面的结论。
（二）imprort>内嵌样式>id>类>标签|伪类|属性选择器>伪对象>继承>通用符：
important权重为：1,0,0,0
id权重为：0,1,0,0
class的权重为：0,0,1,0
标签的权重为：0,0,0,1
属性的权重为：0,0,1,0
伪对象的权重为：0,0,0,1
通配符的权重为：0,0,0,0
我们将上段代码的test.css中代码改写为：

#test{
    color: red!important;
}

在浏览器中打开时可以发现，文字变为了红色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css权重</title>
        <link rel="stylesheet" type="text/css" href="test.css">
        <style type="text/css">
            #test{
                color: blue!important;  /*1,0,0,0*/
            }
            #test #compare{
                color: green!important; /*1,1,0,0*/
            }
            #test .compare{
                color: red!important;   /*1,0,1,0*/
            }
        </style>
    </head>
    <body>
        <div class="test" id="test">
            <div class="compare" id="compare">这是一个测试啊,猜猜这个颜色是神马颜色啊</div>
        </div>
    </body>
</html>

可以按照我们的上面所给的权重规则来进行权重的计算，权重最高的，html元素则会获得其样式，上面的字体颜色会试绿色

zp1996323

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css权重

css权重是一个很基础的问题，我们应该很清楚这个问题。 css权重可以按照俩种方式来区分，（一）按照css的引入方式内嵌样式>内部样式表>外联样式表测试一下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css权重</title> <link rel="s
复制链接

扫一扫

专栏目录