Chinaunix首页 | 论坛 | 博客
  • 博客访问: 389754
  • 博文数量: 273
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1430
  • 用 户 组: 普通用户
  • 注册时间: 2018-02-02 15:57
文章分类

全部博文(273)

文章存档

2018年(273)

我的朋友

分类: Html/Css

2018-08-02 14:18:18

当我们在讨论CSS选择器优先级的时候,我们再讨论什么?

其实很多人都对此有点模糊,那我换个方式问: 一个CSS属性的最终值是怎么来?

回答 : CSS属性的最终值是通过层叠计算得来的。

那什么是层叠计算呢?

我通俗的理解,其实就是先计算重叠

层叠是CSS的一个基本特征,它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位,CSS的全称层叠样式表正是强调了这一点。

计算过程

计算的过程指的是用户代理(浏览器只是用户代理的一种“实例”)在渲染HTML的时候,对CSS进行层叠计算的过程(这里不讨论浏览器的渲染、重绘等触发时机)。

为了方便理解,这里只针对一个属性值(padding)进行讨论,其他的属性值都是一样的过程。


demo:

<div class="taobao_com" id="taobao_com" data-show="true"> <div class="taobao">div> <p>taobao.comp> div>
div{ padding:1px;
} .taobao_com{ padding:12px;
} div .taobao{ padding:123px;
} .taobao_com .taobao{ padding:1234px;
}

在属性的计算之前,会对每个文档元素的每个属性上的值进行排序 ():


阅读(901) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~