目录
- 一、抛出两个问题
- 1.如果我们学过==优先级==关系，那么请思考如下样式为何会生效
- 2.如果我们学习过继承，那么可以知道color是可以被子元素继承使用的，那么请思考下述情景为何不生效
- 二、属性值计算过程
- 1.确定声明值
- 2.层叠冲突
- 3.使用继承
- 4.使用默认值
一、抛出两个问题
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.使用默认值
对仍然没有值的属性，使用默认值！
