css 样式层叠规则

查看别人CSS,发现有一段CSS代码

.button.dark.blue {
background-color: #0077B3;
}
.button.dark {
background-color: #777777;
color: #FFFFFF;
}

如果这样写,backgroud-color到底是用谁的呢?原来我只知道内联样式的权值>>ID选择器>>类选择器>>标签选择器这样的规则,还有就是越精细等级越高,看上面CSS代码,应该是第一个优先级更高吧!测试了一下,还真是这样.

这时候,我顺便找了下CSS具体的规则说明:

css选择器	权值
内联样式	1000
ID选择器	100
类选择器	10
伪类(:link等)	10
伪类(:link等)	1
伪元素(:first-child等)	1

按照这个权值计算

.button.dark.blue = 10+10+10=30;

button.dark=10+10 = 20

权值越高,等级就越高啦!

你知道了吗?