CSS权值覆盖规则

最新推荐文章于 2024-11-16 13:44:17 发布

瓜冬瓜

最新推荐文章于 2024-11-16 13:44:17 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS权值权值 CSS 样式声明样式

本文链接：https://blog.youkuaiyun.com/weixin_42561383/article/details/86557612

CSS 专栏收录该内容

17 篇文章

订阅专栏

当多条CSS样式作用于同一元素时，决定生效样式的过程包括：区分正常声明和重要声明，重要声明按权值排序，无重要声明则正常声明排序；权值相同则按来源顺序；权重排序为：读者样式>设计样式>设计正常样式>读者正常样式>浏览器默认样式。通配选择器权值大于继承，测试显示通配选择器的样式会覆盖继承的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果有多条样式声明作用于同一元素，那么则会按照下面的步骤决定哪条样式会生效：

会把应用于同一个元素的所有样式声明拿出来；
把这些样式分为正常声明和重要声明（声明里面含有!important）两种；
如果有重要声明的话，对重要声明按照权值进行排序，权值大的排下面，正常声明就不用理了，直接跳到第五步；
如果没有重要声明的话，就对正常声明按照权值排序，权值大的排下面；
权值相同的按照 内联>嵌入>外部 进行排序；
顺序执行排序好的声明，后执行的会对先执行的覆盖。

选择器	权值
内联样式	1000
选择器中的`id`属性值	100
选择器中的类属性值、属性选择、伪类	10
选择器中的元素、伪元素	1
通配选择器`*`	0
继承	无

样式一共有三个来源：创作人员设计的样式、浏览器的默认样式、读者设置的样式
三者的权重排序为：读者设置的!important样式 > 创作人员设计的!important样式 > 创作人员设计的正常样式 > 读者设置的正常样式 > 浏览器的默认样式。

通配选择器*的权值为0和继承没有权值相比，通配选择器*的权值更大，我们可以测试一下：

    <style type="text/css">
        *{
            color:blue;
        }
        div{
            color:red;
        }
    </style>

<body>
    <div>
        <h1>hello world</h1>
        hello world
    </div>
</body>

测试结果为：
在这里插入图片描述
h1会从父元素div那里继承color: red，以及通配选择器*的color: blue，结果却是blue生效，可以看出通配选择器*的权值更大。