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; /* 表示继承 */
}

以上。


参考:渡一教育。

相关推荐
光影少年13 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_14 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891116 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾18 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu20 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym24 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫25 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫29 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat31 分钟前
前端性能优化2
前端
SameX33 分钟前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos