百科问答小站 logo
百科问答小站 font logo



CSS的样式表 内联外部和内部优先级? 第1页

  

user avatar   justineo 网友的相关建议: 
      

这么说吧,正确理解 CSS 中层叠优先级逻辑的工程师,很少。但逻辑其实并不复杂。

所谓的「层叠」(cascading),就是为每个元素的每个 CSS 属性计算出生效的属性值的过程。

1. 先看样式来源,也就是说样式是谁写的。同时结合!important

浏览器 +!important> 用户 +!important> 开发者 +!important> 开发者 > 用户 > 浏览器。

2. 再看规则的特异性(specificity)。

内联 > 选择器。

3. 最后看声明顺序。

什么内部外部根本不影响,网上错漏百出的文章太多了。


另外,很多人容易把层叠过程和继承搞混。要搞清楚这个,先要了解 CSS 处理属性值的流程,属性值在处理流程中分为多个阶段:

1. declared value

比如一个<div>元素的width属性,可能被很多地方的声明命中:

       <div id="box" style="width: 100px">      
       div {   width: 10em; }  #box {   width: 80%; }      

2. cascaded value

通过计算层叠优先级,在第一步的多个值中找到优先级最高的那个。

3. specified value

如果在前两步发现没有指定color的值,那么根据默认值的逻辑进行填充。具体逻辑可以参考一下我之前的一个回答

4. computed value

80%这种相对值计算为绝对值,比如根据父元素的宽度转换成px单位。

5. used value

多个属性值结合以后,不一定满足规范的约束,需要根据规范规定的方式确定各个属性最后采用的值。比如一个绝对定位元素的left/right/width不可能完全根据指定值来,那么在指定的值过度约束时,需要根据规则进行调整。

6. actual value

浏览器实现时根据硬件、软件环境可能会对最后生效的值进一步进行调整,比如调整小数的精度。

我们常说的优先级其实就是其中 1 到 2 的最初那步,一共就三个层级的规则。




  

相关话题

  哪段代码最能代表程序员的暴力美学? 
  为什么学了一个学期的c语言,感觉一直都是在用代码去做一些简单的数学题,没有什么实际用途? 
  既然有些人喜欢开挂,为啥不开发一款网游,提供编程接口,允许玩家自行用各种软件,同时允许计算机参与计算? 
  参加ICPC国际编程竞赛的大学生到底有多厉害,在校生该如何准备? 
  程序员到底有多累、多辛苦? 
  汇编过程调用是怎样操作栈的? 
  现在软件行业已经很成熟,为什么程序员还在没日没夜敲代码搞系统更新? 
  12 岁如何入门 iOS 编程? 
  程序员行业有哪些越早知道越好的道理? 
  为什么很多大牛在写题的时候要加一堆宏? 

前一个讨论
数学系哪门课最难学?
下一个讨论
关于 贫血模型 与 函数式编程 的疑问?





© 2025-05-05 - tinynew.org. All Rights Reserved.
© 2025-05-05 - tinynew.org. 保留所有权利