CSS Specificity

浏览数：20 / 时间：2015年06月09日

CSS的specificity特性或称非凡性，它是一个衡量CSS值优先级的一个标准。

其实就是解决冲突，当同一个元素被CSS选择符选中，按照优先权取舍不同的CSS规则。

specificity用一个四位数字串（CSS2是三位）来表示，值从左到右，左面最大，一级大于一
级，数位间没有进制，级别间不可超越。

Inline Styling, Identifiers, Classes, Elements

多个选择符应用于同一个元素上那么specificity值高的最终获得优先级。

选择符Specificity值列表：

Selectors 选择符	Syntax Samples 语法	ensample 示例	Specificity 特性
通配选择符(Universal Selector)	*	*.div { width:560px;}	0,0,0,0
类型选择符(Type Selectors)	E1	td { font-size:12px;}	0,0,0,1
伪类选择符(Pseudo-classes Selectors)	E1:link	a:link { font-size:12px;}	0,0,1,0
属性选择符(Attribute Selectors)	E1[attr]	h[title] {color:blue;}	0,0,1,0
ID选择符(ID Selectors)	#sID	#sj{ font-size:12px;}	0,1,0,0
类选择符(Class Selectors)	E1.className	.sjweb{color:blue;}	0,0,1,0
子对象选择符(Child Selectors)	E1 > E2	body > p {color:blue;}	E1+E2
相邻选择符(Adjacent Sibling Selectors)	E1 + E2	div + p {color:blue;}	E1+E2
选择符分组(Grouping)	E1,E2,E3	.td1,a,body {color:blue;}	E1+E2+E3
包含选择符(Descendant Selectors)	E1 E2	table td {color:blue;}	E1+E2

例子：

h1 {color: red;}  
/* 只有一个类型选择符，结果是 0,0,0,1 */ 
body h1 {color: green;}  
/* 包含选择符，结果是 0,0,0,2 */ 
/*后者胜出*/

另外一些规则：
1.行内样式优先级高于外部定义。行内样式就是如<div style=”color: red”>blah</div>
，外部定义指经由<link>或<style>标签定义的规则。
2.!important声明的specificity值最高
3.specificity值一样的情况下，按CSS代码中出现的顺序决定，较后的CSS样式会覆盖前面的
CSS样式
4.由继承而得到的样式没有specificity的计算，它低于一切其他规则（比如通配选择符*定
义的规则）

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS Specificity