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>

文字颜色为红色。