目录
一、抛出两个问题
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.使用默认值
对仍然没有值的属性,使用默认值!