CSS2 学习 - 结构和层叠篇

2014年10月04日 陈鑫杰

前言

h1 {color:red;} 简单明确,可如果是:
h1 {color:red;}
h1 {color:black;}
body h1 {color:green;}
就显得略微复杂了。
为什么,一个 h1 标签可以有这么多种颜色?
不!h1 标签有且只有一种颜色。

摘要

每一个合法的文档(html)都会生成一个结构树,通过这一点就可以根据元素创建选择器来选择元素。这是 CSS 继承的核心。
用户代理通过考虑继承、声明的特殊性、以及声明本身的来源,来确定一个元素应用哪些值。这个过程被称为层叠。

特殊性

特殊性由选择器本身的组件决定。如果有两个以上冲突的声明,那么用户代理会计算声明的特殊性,特殊性最高的声明胜出。
特殊性可以分为4个,如 0,0,0,0。
各个 ID 属性值,加 0,1,0,0。
各个类属性值,属性选择或伪类,加 0,0,1,0。
各个元素,伪类元素,加 0,0,0,1。
h1 {color:red;} /* 0,0,0,1 */
body h1 {color:green;} /* 0,0,0,2 胜出 */
h2.grape {color:red;} /* 0,0,1,1 胜出 */
h2 {color:silver;} /* 0,0,0,1 */
html > body table tr[id=”totals”] td ul > li {color:maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 胜出*/
内联声明的特殊性都是:1,0,0,0。比其他声明的特殊性都高。

继承

基于继承,样式不仅应用到指定的元素,还会应用到它的后代。
有些元素不能继承,例如:border、大多数框架模型属性(外边距、内边距、背景和边框)
继承没有特殊性
继承 BUG:
body {font-size: 0.8em;}
body, table, th, td {font-size:0.8em;}
由于浏览器本身在继承方面存在问题,使用第二个样式比较可能得到想要的结果。

层叠

层叠的规则:

  • 找出所有相关的规则。
  • 按显式权重对应用到该元素的所有声明排序。标识 !important 的规则的权重高于没有 !important 标识的规则。按来源对应用到给定元素的所有声明排序。
  • 按特殊性对应用到给定元素的声明排序。
  • 按出现顺序对应用到给定元素的声明排序。

按权重和来源排序

标识有 !important 的规则的权重要高于没有 !important 的规则。
创作人员,代表设计、开发人员。
读者,代表用户。读者样式,即设置自定义的浏览样式。 用户代理,代表浏览器默认设置。
那么权重由大到小的顺序依次为:

  • 读者的重要声明(即 !important)
  • 创作人员的重要声明
  • 创作人员的正常声明
  • 读者的正常声明
  • 用户代理声明

按特殊性排序

较高的特殊性强于较低的特殊性

按顺序排序

如果规则的权重、来源和特殊性完全相同,那么样式表中后出现的一个会胜出。
体现在 link-visited-hover-active(LVHA) 的顺序声明链接样式。

(转载本站文章请注明作者和出处 FoamValue – www.foamvalue.com ——=== 访问 404页面 寻找遗失儿童。 ===——