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官方。

使用默认值

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

结语

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

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#