继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。
例如,如果向一个 <h1>
元素应用一个颜色:
那么这个颜色不仅应用到所有的 <h1>
元素,还会应用到所有的子元素中的文本,例如 <h1>
元素中的 <strong>
、<em>
元素。
继承很适合用在修改列表、表格的样式上。这样简化了编写选择器的结构。
关于继承有一点看起来违反常识:大多数边框属性(包括外边距、内边距、背景和边框)都不能继承。
原因很简单:边框属性会造成父子外观上的冲突。因此这些属性被设定成不可继承以避免去除的麻烦。
注意:继承的值根本没有特殊性,连0特殊性也没有。因此继承的属性会被通配符的属性覆盖。
因此通配选择器是一种禁止继承的方法。
层叠
CSS2.1的层叠规则非常简单:
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
- 按显式权重对应用到该元素的所有声明排序。标志
!important
的规则要高于没有该标志的规则。 - 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
- 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。
如果样式表中有导入的样式表,一般认为导入样式表的声明在前,主样式表的声明在后。
按权重和来源排序
浏览器在表现HTML页面时,会提供一些默认的样式(例如超链接的蓝色前景色)。这些样式是用户代理(agent)样式。
读者在阅读HTML时,如果对当前样式不满意,可能需要通过浏览器提供的接口添加样式(例如放大字体)。这些样式是读者(reader)样式。
在声明权重时要考虑5级。权重由大到小的顺序依次为:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
因此在编写CSS时无需考虑浏览器提供的样式如何。
按顺序排序
如果两个规则完全相同,那么将以样式表中最后一个出现的为准。
由于这种按顺序排序,因此对链接伪元素样式的排序建议为:
:link→:visited→:hover→:active(LVHA)
因为它们的特殊性相同,但作用范围从大到小。如果不这么设置,有些样式规则可能永远无法展现。
如果需要修改排序实现扩充效果,建议链接多个伪类选择器。
非CSS表现提示
文档可能包含非CSS的表现提示,例如 font
元素。
非CSS提示的特殊性为 (0) ,并出现在创作人员样式表的最前面。
因此,只要有创作人员样式或读者样式,这种表现就会被覆盖。它仅能覆盖用户代理的样式。