所有资料均来自于《CSS权威指南》第三版
样式
外部样式
注意,一个文档可能关联有多个链接样式表。如果是这样,文档最初显示时只会使用 rel
为 stylesheet
的 link
标记。
嵌套样式(内联样式,<style>
)
如果为一个 rel
为 stylesheet
的 link
指定了标题( title
),也就指定了该样式表要作为首选样式表(preferred stylesheet)。这意味着,这个样式表要优先于候选样式表使用,而且第一次显示文档时会使用这个首选样式表。不过,旦选择了候选样式表,就不会再使用首选样式表了。
此外,如果将一组样式表指定为首选样式表,那么只会使用其中的某一个,除此以外,其他的都会被忽略。
与 link
类似, @import
用于指示web浏览器加载一个外部样式表,并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。可以看到, @import
要放在其他CSS规则之前,否则将根本不起作用。
类似于 link
,一个文档中可以有不只一个 @import
语句。但不同于 link
,每个 @import
指令的样式表都会加载并使用;用 @import
无法指定候选样式表。
还要注意, @import
指令出现在样式表的开头,如示例文档所示。css要求 @import
指令出现在样式表中的其他规則之前·如果一个 @import
出现在其他规则之后,兼容用户代理会将其忽略。
内联样式
除了在 body
外部出现的标记(例如, head
或 title
), style
属性可以与任何其他HTML标记关联。
注意,一个内联 style
属性中只能放一个声明块,而不能放整个样式表。因此,不能在 style
属性中放 @import
,也不能包含完整的规则。 style
属性的值中只能是规则中出现在大括号之间的部分。
选择器
声明和关键字
如果一个属性的值可以去多个关键字,这种情况下关键字通常由空格分隔
伪类选择器
伪类的实质:它是把某种幻想类关联到与伪类相关的元素
伪元素选择器
为元素能够在文档中插入假象的元素,从而得到某种效果
另外,所有伪元素都必须放在出现该伪元素的选择器的最后面。因此,如果写成
p:first-line em
就是不合法的,因为伪元素在选择器主体前面出现(主体是这里所列的最后一个元素,即 em
).这个规则同样适用于CSS2.1定义的另外两个伪元素。
结构与层叠
选择器特殊性
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分,一个选择器的具体特殊性如下确定:
- 对于选择器中给定的各个ID属性值,加0,1,0,0。
- 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0。
- 对于选择器中给定的各个元素和伪元素,加0,0,0,1。伪元素是否有特殊性?在这方面CSS2有些自相矛盾,不过CSS2.1很清楚地指出,伪元素有特殊性,而且特殊性为0,0,0,1。
- 结合符和通配选择器对特殊性没有任何贡献(后面还会更多地介绍这些值)。
通配符选择器特殊性
前面提到过,通配选择器对一个选择器的特殊性没有贡献。换句话说,其特殊性为0,0,0,0,这与根本没有特殊性有区别,相比之下,结合符则根本没有特殊性,甚至连0特殊性都没有。
重要声明
标志为 !important
的声明并没有特殊的特殊性值,不过要与非重要声际上,所有 !important
声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突,胜出的总是重要声明。
继承
继承的值根本没有特殊性,甚至连0特殊性都没有。没有特殊性可能会被元素的用户代理样式占上风
层叠规则
- 找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器。
- 按显式权重对应用到该元素的所有声明排序。标志
!important
的规则的权重要高于没有!important
标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员、读者和用户代理。正常情况下,创作人员的样式要胜过读者的样式。有!important
标志的读者样式要强于所有其他样式,这包括有!important
标志的创作人员样式。创作人员样式和读者样式都比用户代理的默认样式要强。 - 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
- 按出现顺序对应用到给定元素的所有声明排序·一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导人的样式表,一般认为出现在导人样式表中的声明在前,主样式表中的所有声明在后。