首页 > 代码库 > 选择器的优先级

选择器的优先级

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后。

 

 

选择器的优先级