CSS——属性值计算

CSS------属性值计算

今天来详细讲解一下 CSS的属性值计算过程 ,这是 CSS 的核心之一(另一个是视觉可视化模型,个人理解,这个相对复杂,以后再讲)。

基本概念

  1. 层叠样式表Cascade Style Sheet,是的,这就是 CSS 的中英文全称。
  2. 层叠 :在 CSS 样式中,会出现一些样式的冲突,层叠就是用来解决这些冲突的。
  3. 声明 :键值对形式,用来指定样式,如:color: red
  4. 用户代理样式表:浏览器内置的默认样式表,确保在没有任何外部或内部CSS的情况下,网页内容能够以一种合理的方式呈现给用户。
  5. 作者样式表:网页作者定义的CSS内容(不一定是一个文件,可以是外部CSS文件,可以是内部<style>标签内的样式、也可以是行内样式)
  6. 用户样式表:网页用户自定义的样式表,一般与我们开发者无关,后面不详细考虑。

属性值计算规则(顺序)

CSS 的属性值计算主要分为以下 4 个步骤:

  • 确定声明值
  • 层叠冲突
  • 使用继承
  • 使用默认值

接下来我们逐一讲述。

确定声明值

我们首先创建以下代码:

html 复制代码
<head>
  <style>
    p {
      color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="text">
    <p>你好,我是懒羊羊大王</p>
  </div>
</body>

这里我们声明了<p>标签文本的为紫罗兰色,目前来看没有冲突,显示出来的也是紫罗兰色,没有任何问题。

层叠冲突

当有样式冲突时,那么浏览器该按照哪个声明渲染呢?前面说到,层叠就是解决冲突的,层叠具体规则以及顺序如下:

  1. 首先比较源的重要性
  2. 然后查看是否为内联(行内)样式
  3. 接着比较选择器的特定性(权重)
  4. 最后比较声明在源码中出现的顺序
源的重要性

样式表按照源可以分为三类:作者样式表、用户样式表(一般不考虑)、浏览器用户代理样式表 。它们的优先级依次降低

查看是否为行内样式

这里不仅仅有使用选择器设置于行内设置的差异,还有一个很特殊但几乎不会使用的情况------! important,优先级为:设置! important的样式 > 行内样式> 选择器样式。

比较选择器的特定性(权重)

当我们将鼠标放置在标签选择器上时,会看到浏览器特定性:(x, y, z) ,这里我们就可以将它看作一个三位正整数,比较大小时,我们先比较 x ,再比较 y ,最后比较 z

问:那么其大小是如何确定的呢?

答:常见的选择器的特定性如下:

id选择器:(1, 0, 0)、

类选择器:(0, 1, 0)、

标签选择器:(0, 0, 1)......

多个选择器的特定性可以叠加。

(伪类选择器(如:hover)和属性选择器(如[type="input"])与一个类选择器的优先级相同。通用选择器(*)和组合器(>、+、~)对优先级没有影响。详情见 MDN Specificity

源码顺序

在前面比较结束之后,仍然未分出优先级的话,那么就来比较在源码中出现的顺序了,同一个样式表中顺序靠后的声明 ,或者是位于html页面较晚引入的样式表中,那么这个声明胜出。

总而言之,层叠的规则如下图所示(记得考虑 ! important

使用继承

那么如果没有声明的属性呢?此时就使用默认值么?
No、No、No,此时还有第三个步骤,那就是使用继承而来的值。如果属性可以继承的话,那么就会继承其父元素的属性值。大多数能继承的属性是一些文字相关的属性,具体的请参考MDN官方。

使用默认值

进行了以上步骤之后,如果属性值都还不能确定下来,那么就会使用默认值。

结语

创作不易,谢谢支持;如有错误,恳请指出,希望与大家共同进步!

相关推荐
开心工作室_kaic35 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā35 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js