一文搞懂 css 属性值的计算过程

最新推荐文章于 2024-07-18 14:29:38 发布

曾平安

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量229

点赞数 5

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

本文链接：https://blog.csdn.net/m0_70097789/article/details/138558237

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

不多说废话直接上结论 css属性计算过程要经历四个步骤:

1.确定声明值

2.解决层叠冲突

3.继承属性值

4.使用默认值

其中步骤2解决层叠冲突又分为3个步骤:

1.作者样式(自己写的样式)覆盖浏览器默认样式

2.比较权重

3.属性书写的先后顺序 (后面覆盖前面的样式）

下面给大家举个例子更好的理解上面的四个步骤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div">
        <a href="">我是a标签</a>
    </div>
    <div class="div">
        <span>我是span标签</span>
    </div>
</body>
<script>

</script>
<style>
.div {
    color: red;
}
</style>
</html>

大家猜猜a标签和span标签内部的文字会是什么颜色

打开控制台调试

我们可以看到a标签中已经存在用户代理样式表(默认样式) ，我们根据上述的四个步骤可知a标签已经被声明了属性且没有样式冲突(我们设置的color是给父元素设置的)，已存在color属性也不需要继承所以不是红色而 span标签没有用户代理样式表(默认样式)，也没有冲突就执行继承属性继承父元素color样式

如果把color:red设置在a标签上就会有存在样式冲突我们写的样式会覆盖浏览器样式，这个很好理解