css优先级和权重

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>
文字颜色为红色。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/shidaping/article/details/49964043
个人分类: web前端
想对作者说点什么? 我来说一句

CSS选择器权重计算及优先级

2017年04月16日 102KB 下载

没有更多推荐了,返回首页

不良信息举报

css优先级和权重

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭