CSS -属性值的计算过程

发布于:2025-03-17 ⋅ 阅读:(19) ⋅ 点赞:(0)

一、抛出两个问题

1.如果我们学过优先级关系,那么请思考如下样式为何会生效

css优先级: !important > 行内样式(比重1000)> ID 选择器(比重100) > 类选择器(比重10) > 标签(比重1) > 通配符 > 继承 > 浏览器默认属性

思考为什么通配符选择器*的权重会大于body的margin和padding属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性值的计算过程</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 200px;
            height: 200px;
            outline: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

在这里插入图片描述

2.如果我们学习过继承,那么可以知道color是可以被子元素继承使用的,那么请思考下述情景为何不生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性值的计算过程</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="#">我有个小梦想</a>
    </div>
</body>
</html>

在这里插入图片描述

二、属性值计算过程

  • 明确知识:页面的元素都具备一套css样式,并非仅有开发人员设定的css属性
  • 过程:无属性值-1.确定声明值-2.层叠冲突-3.使用继承-4.使用默认值-每个属性都有值

1.确定声明值

参考样式表中没有冲突的声明,作为css属性值

.container{
	color:red;
	font-size:16px;
}
h1{
	font-size:20px
}
.container h1{
	font-size:12px;
	font-size:16px;
}
/* 浏览器默认样式*/
h1{
	font-size:2em;/*举例*/
}

上述通过步骤一,可以提取出未存在冲突的 color:red;

理解好上述流程后,打开控制台我们可以看到a标签存在浏览器的默认样式,属于未存在冲突样式,color使用浏览器默认值在此环节生效,如有疑问,继续向下看,核心看继承样式生效时机

在这里插入图片描述

2.层叠冲突

对样式表有冲突的声明使用层叠规则,确定CSS属性值

  • 层叠冲突处理过程
    • 比较重要性 - 作者样式表>浏览器默认样式表 解决上述问题1
    • 比较特殊性 - css优先级
    • 比较源次序 - 后写的css覆盖先写的

通过比较重要性:浏览器默认的font-size:2em被覆盖
通过比较特殊性:确认 container h1样式被最终生效
通过比较源次序:container h1中的font-size:16px;为最终生效值

上述通过步骤二,可以提取出的 font-size:16px;

3.使用继承

对仍然没有值得属性,若可以继承,则继承父元素的值

需要明确可继承属性!!!

4.使用默认值

对仍然没有值的属性,使用默认值!


网站公告

今日签到

点亮在社区的每一天
去签到