CSS2学习笔记06

结构的继承和层叠

系列文章

继承

基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。
例如,如果向一个 <h1> 元素应用一个颜色:

h1 { color: gray; }

那么这个颜色不仅应用到所有的 <h1> 元素,还会应用到所有的子元素中的文本,例如 <h1> 元素中的 <strong><em> 元素。

继承很适合用在修改列表、表格的样式上。这样简化了编写选择器的结构。

在HTML中,有一个继承的向上传播例外:应用到 <body> 元素的背景样式可以传递到根元素 <html> ,相应的可以定义其画布。

关于继承有一点看起来违反常识:大多数边框属性(包括外边距、内边距、背景和边框)都不能继承。
原因很简单:边框属性会造成父子外观上的冲突。因此这些属性被设定成不可继承以避免去除的麻烦。

注意:继承的值根本没有特殊性,连0特殊性也没有。因此继承的属性会被通配符的属性覆盖。
因此通配选择器是一种禁止继承的方法。

层叠

CSS2.1的层叠规则非常简单:

  1. 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
  2. 按显式权重对应用到该元素的所有声明排序。标志 !important 的规则要高于没有该标志的规则。
  3. 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
  4. 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。
    如果样式表中有导入的样式表,一般认为导入样式表的声明在前,主样式表的声明在后。

按权重和来源排序

浏览器在表现HTML页面时,会提供一些默认的样式(例如超链接的蓝色前景色)。这些样式是用户代理(agent)样式。

读者在阅读HTML时,如果对当前样式不满意,可能需要通过浏览器提供的接口添加样式(例如放大字体)。这些样式是读者(reader)样式。

在声明权重时要考虑5级。权重由大到小的顺序依次为:

  1. 读者的重要声明
  2. 创作人员的重要声明
  3. 创作人员的正常声明
  4. 读者的正常声明
  5. 用户代理声明

因此在编写CSS时无需考虑浏览器提供的样式如何。

按顺序排序

如果两个规则完全相同,那么将以样式表中最后一个出现的为准。

由于这种按顺序排序,因此对链接伪元素样式的排序建议为:
:link→:visited→:hover→:active(LVHA)
因为它们的特殊性相同,但作用范围从大到小。如果不这么设置,有些样式规则可能永远无法展现。
如果需要修改排序实现扩充效果,建议链接多个伪类选择器。

非CSS表现提示

文档可能包含非CSS的表现提示,例如 font 元素。
非CSS提示的特殊性为 (0) ,并出现在创作人员样式表的最前面。

因此,只要有创作人员样式或读者样式,这种表现就会被覆盖。它仅能覆盖用户代理的样式。