你不知道的层叠样式表

2018-10-17 admin

层叠规则

你或许知道 CSS 是 Cascading Style Sheets(层叠样式表)的缩写。但你不一定真正的理解了其中层叠的含义。

你可能会以为层叠指的是选择器的优先级,但这是不准确的。

对于浏览器页面上某个元素的某个属性值,它可能会有多个来源(Cascading Origins):

  1. 用户代理 (user agent)提供的样式
  2. 用户自定义的样式
  3. 网站提供的样式

用户代理即是指浏览器,https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css 这里是 chromium 的样式表。现在我们常常会使用 reset.css 或者 normalize.css 使的各个浏览器之间默认样式统一。

用户自定义样式虽然规范中有,但从 chrome 33 起,开始不支持用户自定义样式表,而是建议使用扩展来实现。

网站提供的样式表,则是我们所提供的 css 的样式。

来源之间是存在优先级的(和选择器的优先级是两回事),优先级高的会覆盖优先级低。我们来验证一下:

https://codepen.io/gygy/pen/m…

可以看到 ruby > rt { font-size: 50% } 是来自 user agent stylesheet。而 rt { font-size: 24px } 来自网站作者,如果单论选择器的权重,它是低于 ruby > rt 的。 但是它依然覆盖了 user agent stylesheet 的 font-size 属性。原因就是 css 会优先根据属性的来源判断。对于相同来源的属性,再应用权重规则。

我们也可以通过 !important 声明某个属性的重要性,再结合它的来源,于是有如下的优先级规则(忽略用户自定义的样式):

  1. 用户代理
  2. 来源用户代理的 !important 属性
  3. 网站作者
  4. CSS 动画(Animation 和 Transition)
  5. 网站作者 !important

其中对于 CSS 动画,在给定时间中 CSS 只会从某一个 @keyframes 中获取值,而不是某几个 @keyframe 的混合。@keyframes 里定义的值会覆盖普通值,但是优先级低于 !important。

权重规则

对于同一来源的 CSS。我们要确定某个元素的某个属性的值,涉及到该元素的选择器的权重问题。选择器大致分为几类:

  • 元素选择器(Elemental selectors):标签名称。
  • 属性选择器(Attribute selectors):id class 某个属性。
  • 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,表现的像一个 class。
  • 伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,表现的像一个 element。
  • 组合选择器(Combinators):div > span 之类的复合选择器。
  • 多重选择器(Multiple selectors)多个选择器之间用逗号隔开。

它们之间的权重规则计算:

A selector’s specificity is calculated for a given element as follows:

  1. count the number of ID selectors in the selector (= A)
  2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
  3. count the number of type selectors and pseudo-elements in the selector (= C)
  4. ignore the universal selector

If the selector is a selector list, this number is calculated for each selector in the list. For a given matching process against the list, the specificity in effect is that of the most specific selector in the list that matches.

简单的说来 id 优先级最高,其次是类和伪类再次是元素和伪元素。然后根据它们各自的数量判断。

其实说到底不建议写过于复杂的选择器,会影响性能和维护代码。建议采用 BEM 规范,书写 CSS 选择器。

CSS 的值的计算过程

为了得到 CSS 的值的生成有很多个步骤:

  1. 收集应用到这个元素上面的所有的声明值(Declared values),可能有 0 个或者多个,包括浏览器的样式表和网站作者样式表中定义的。
  2. 根据声明值和上述的层叠规则得到这个属性的层叠值(Cascaded Values),层叠值只能有一个或者为空。
  3. 如果层叠值存在,则指定值(Specified Values)等于层叠值。否则,则会应用 CSS 中属性继承的规则,得到一个继承值(Inherited value),层叠值等于这个继承值。如果该属性不适用于继承,指定值会等于这个属性的初始值(Initial value)。每个元素的每个属性都有且只有一个指定值。
  4. 一些属性值是属于相对单位 如 1em 会被转化为 px,在这个过程中相对值会被绝对化,得到计算值(Computed Values),这个值可以被用于继承。
  5. 应用值(Used Values)是浏览器根据计算器,然后完成剩余的计算,得到理论上布局的值。如 width: auto 在此过程中,会被计算得出精确的像素值。
  6. 实际值(Actual Values)是指浏览器根据现实情况布局所用到值。比如 px 如果是小数,会被转化为整数布局,因为物理上 1px 不可分。

举几个例子说明一下上述步骤:

  • 对于 font-size,由于它是可继承的值,所以即使你没为某个元素设置 font-size 大小,它的层叠值为空,它也会在第三步的时候,将指定值赋值于获取他的继承值。(这个继承者来源于父级元素的计算值)。
  • 对于 float 不为 none 的元素,即使你手动声明了 display: inline,此时 display 在第四步的时候,会被赋值为 block。即 float 不为 none 的元素的 display 计算值为 block。

参考链接

原文链接:https://segmentfault.com/a/1190000016716160

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42957.html

文章标题:你不知道的层叠样式表

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
回到顶部