CSS 属性值计算过程

目录

例子

我们来举例说明<h1> 标签最终的样式:

html 复制代码
<div>
  <h1 class="red">标题一</h1>
</div>

样式表1------自定义样式

css 复制代码
.red {
  color: salmon;
  font-size: 40px;
}

h1 {
  font-size: 30px;
}

div h1.red {
  font-size: 20px;
  font-size: 3em;
}

div {
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
}

样式表2------浏览器默认样式


一个 css 属性计算出的最终属性值,会经过下面4个步骤。

1,确定声明值

在所有样式表中,没有冲突的 css 样式就是最终样式

可以看到,没有冲突的 css 样式有 color display margin-block-start... 等等。

所以这一步得到确定的最终样式:

css 复制代码
h1 {
  color: salmon;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  /* 其他 css 声明... */
}

2,层叠冲突

对样式表中,有冲突的声明使用层叠规则

2.1,比较源重要性

重要性:自定义样式 > 浏览器默认样式。

所以font-size 的最终值会在自定义样式中确定:

css 复制代码
.red {
  font-size: 40px;
}

h1 {
  font-size: 30px;
}

div h1.red {
  font-size: 20px;
  font-size: 3em;
}

这一步能够解释:为什么选择器权重低的自定义样式 * { margin: 0 },会覆盖浏览器默认的样式 body { margin: 8px }

2.2,比较优先级

也就是选择器的权重。很明显这个选择器的权重最高:

css 复制代码
div h1.red {
  font-size: 20px;
  font-size: 3em;
}

2.3,比较源次序

相同 css 样式,代码靠后的覆盖代码靠前的。

此时得到的最终样式:

css 复制代码
h1 {
  font-size: 3em;
  color: salmon;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  /* 其他 css 声明... */
}

3,使用继承

对仍然没有值的样式,若可以继承,则继承父元素的样式

可以看到自定义样式还有一条 css 声明

css 复制代码
div {
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
}

其中 background-color 不能继承,text-align 可以继承。所以得到继承样式:

css 复制代码
h1 {
  text-align: center;
  font-size: 3em;
  color: salmon;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  /* 其他 css 声明... */
}

4,使用默认值

对仍然没有值的样式,使用默认值(预设值)

比如 <h1>background-color 默认值是 transparent

css 复制代码
h1 {
  background-color: transparent;
  text-align: center;
  font-size: 3em;
  color: salmon;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  /* 其他 css 声明... */
}

此时已经确定了最终的样式,还需要通过最后一步单位转换,让浏览器能够识别。

尺寸相关的样式,会将相对单位转换为绝对单位,比如 em rem % auto 都转为 px

颜色都会转换 rgb()。red 转为 rgb(255, 255, 255)transparent 转为 rgba(0, 0, 0, 0)


其他

有了上面的规则,再看一个例子:

html 复制代码
<div class="box">
  <a href="">超链接</a>
</div>
css 复制代码
.box {
  color: red !important;
}

效果:

解释:

在第一步确定声明值中,<a> 的浏览器默认样式中是有 color 样式的。而且也没有对 <a> 设置自定义样式。所以直接就能确定 <a>color 样式值。

所以,一般在项目中会对 <a> 设置如下自定义样式,来继承父级的 color,方便后续的操作。

css 复制代码
a {
  text-decoration: none;
  color: inherit; /* 表示继承 */
}

以上。


参考:渡一教育。

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端