css priority

一、CSS优先级

优先级指的是同时有多个样式作用在一个元素上时，元素根据什么规则来应用样式。

总的规则就是：!important>id>class>element

import-a-google-font小节中如何让h2元素的字体为Lobster，但同时让p元素的字体保持为Monospace呢？

如果你仅仅是这样写：

  .red-text {
    color: red;
    font-family:Lobster;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }

你会发现左下角的测试最后一项你通不过，就是因为class选择器的优先级高于元素选择器。

上面的写法会造成p元素的实际生效的字体为Lobster，默认字体Monospace被覆盖了。

正确的写法应该是：

  .red-text {
    color: red;
  }
  h2 {font-family:Lobster;}
  p {
    font-size: 16px;
    font-family: Monospace;
  }

这样Lobster字体的应用范围仅限h2元素，不会影响到p元素。