码迷,mamicode.com
首页 > 其他好文 > 详细

选择器的优先级

时间:2017-04-26 19:21:31      阅读:116      评论:0      收藏:0      [点我收藏+]

标签::link   标签   active   选择   相同   链接   元素   link   优先   

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

 

 

选择器的优先级

标签::link   标签   active   选择   相同   链接   元素   link   优先   

原文地址:http://www.cnblogs.com/yiquan/p/6770048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!