关闭

css优先级和权重

标签: css优先级权重class样式表
344人阅读 评论(0) 收藏 举报
分类:

1.css权重级:

  • id选择器为100
  • class选择器为10
  • 元素选择器为1
这如何理解呢?
 优先级等于所有选择器权重相加。例如:#test.test 的优先级就为110, #test span的优先级就为101,前者大于后者,所有前者优先。

示例

  <style>
  div#test {
  	color:red;
  }
  div.test{
  	color:orange;
  }

  </style>
  <div class='test' id='test'>文字</div>

文字颜色为红色,因为div#test优先级为101,div.test优先级为11。

2.权重一样,后面的样式优先

示例
  <style>
  .test#test {
  	color:red;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test'>文字</div>
文字颜色为蓝色。

3.元素style属性高于css中的样式

示例
  <style>
  .test#test {
  	color:red;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test' style='color:green;'>文字</div>
文字颜色为绿色。

4.!import优先,高于style属性css中的样式

示例
  <style>
  .test#test {
  	color:red !important;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test' style='color:green;'>文字</div>
文字颜色为红色。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:78565次
    • 积分:1653
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:16篇
    • 译文:0篇
    • 评论:0条
    文章分类