关于选择器的优先级,我们要说到特指度,它可以用数值表示选择器的优先程度,数值越大,越优先。
通常我们用这样的规则:
- 遇到内联样式表数值加1000
- 遇到一个id选择器数值加100
- 遇到一个类选择器数值加10
- 遇到一个元素选择器数值加1
CSS选择器 | 数值 |
---|---|
span | 1 |
span.name | 11 |
span#number | 101 |
span ul.list | 12 |
div #pic ul.list | 112 |
还有例外:
- !important优先级最高,高于一切。
- *选择器最低,低于一切。
浏览器中body是默认有边距的,我们一般用*{margin:0}来兼容边距,*选择器按照道理来说优先级是低于body的,但css还是生效了,这其实是浏览器在背后做的手脚。