CSS规则的specificity

05 Dec 2016 Category: CSS

关于specificity的具体计算在各种情况下的数字加成有如下一般规则:


h1 {color: red;} 
//只有一个普通元素加成,结果是 1 
body h1 {color: green;} 
//两个普通元素加成,结果是 2 */ ——后者胜出 
h2.grape {color: purple;} 
//一个普通元素、一个class选择符加成,结果是 11*/ 
h2 {color: silver;} 
//一个普通元素,结果是 01 */ ——前者胜出 
html > body table tr[id=”totals”] td ul > li {color: maroon;} 
//7个普通元素、一个属性选择符、两个其他选择符,结果是17 */ 
li#answer {color: navy;} 
//一个ID选择符,一个普通选择符,结果是101 */ ——后者胜出

看一下实际的效果:

<head>
<meta charset="utf-8">
<title>demo</title>
<style>

.demoa {color:#777 !important;}

/* 10+1+10 = 21*/
.colortest a[id=testa] {color:#ccc;}

/*10+1+10 = 21*/
.colortest p .demoa {color:#666;}

/*10*/
.colortest {color:red;}

/*10+1 = 11*/
.colortest a {color:green;}

p a {color:#222;}

/* 10 + 10 = 20*/
.colortest .demoa {color:yellow;}	



</style>
</head>
<body>

<div class="colortest">
<p style="color:#999;">
<a id="testa" class="demoa" style="color:#111;"> a color test</a>
</p>
</div>
</body>

avatar

浏览器中显示的顺序就是样式优先级别的顺序。important除外。从结果可以看出: