选择器的优先级

Posted 2020-09-14

CSS优先级

1. 属性在后面使用！important会覆盖页面任何位置定义的元素样式
2. 作为style属性写在元素内的样式
3. ID选择器
4. 伪类选择器
5. 属性选择器
6. 标签选择器
7. 通配选择器
8. 浏览器自带或继承
9. 在同一级别的后写的会覆盖先写的样式

 

在多级别规则组合的时候，用可以假设权值相加

1. 内联样式表权值为1000
2. ID权值为100
3. class类选择器的权值为10
4. html标签权值为1

• 当两个权值相同时，就用这个原则来判断
• 谁更具体就用谁，后面的会覆盖前面的
• 实际上上述的权值设置为假设方便理解，排在前面的权值永远比后面的大

 

顺便一提a:link, a:hover, a:active, a:visited的顺序是a:link，a:visited，a:hover， a:active

原因是浏览器在解析css时遵循“就近原则”，即为后面的会覆盖前面的

1. 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义； 
2. 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义； 

　　所以a:hover定义一定要放在a:link、a:visited的后面，同理可得a:active须在a:hover后。