CSS样式的继承详解

        在页面布局的时候，往往采用的是分级布局，如果对每一块内容均单独进行样式编辑，修改会非常麻烦，而且调试困难。对于这种情况，我们往往会经常遇到，所以我们编辑样式的策略就是会选择大级别进行样式编辑，然后对个别小级别样式做修改，CSS具有一定的继承特性，这里采用background-color为例说明。

        ▪ 最低优先级：body元素。这个主要定义总体样式，对于单独的css-style编写，需要写在html布局的开头。

<style>   body{     background-color : black;   }</style>

这里整个页面的背景颜色就会呈现黑色，body是最大的元素也是优先级最低的元素，所有的子块样式都可以覆盖他的样式。

        ▪ 下一级优先级：h1等其他元素，这些元素进行css编写时会覆盖body里的样式定义。

<style>   body{      background-color:black;   }   h1{      background-color:orange;   }</style><h1> Hello World </h1>

这是h1的背景将会显示为橙色，而不是黑色。

        ▪ 下一级优先级：class类，当元素的样式确定后，若添加类样式，则会覆盖当前元素的样式。

<style>   body{     background-color:black;   }    h1{     background-color:orange;   }   .red-ground{     background-color:red;   }</style><h1 class = “red-ground”>helloworld</h1>

这里要注意有多个class类的情况，完全有style里面写class的一个顺序决定，先写的class优先级一定比后写的class优先级低。

<style>   body{     background-color:black;   }   h1{     background-color:orange;   }   .red-ground{     background-color:red;   }   .green-ground{     background-color:green;   }</style><h1 class = “red-groundgreen-ground”>hello world</h1>

这个时候，green-ground写在red-ground的后面，所以green-ground优先级比前者高，背景显示green。

        ▪ 下一级优先级：id，在整个页面中，一般情况id是唯一的，所以当他存在的时候，会覆盖掉class类的样式。

<style>   body{     background-color:black;   }   h1{     background-color:orange;   }   .red-ground{     background-color:red;   }   .green-ground{     background-color:green;   }   #yellow-ground{     background-color:yellow;   }</style><h1 class = “red-groundgreen-ground” id=”yellow-background”>hello world</h1>

这里背景显示为黄色。

        ▪ 下一级优先级：行内样式in-line style，前面说的均是在<style></style>里面的声明，当采用行内样式时，会覆盖之前所有定义在style里面的样式。

<h1 class = “red-groundgreen-ground” id=”yellow-background” style=”background:blue”>helloworld</h1>

        ▪ 最高优先级：!important，也被成为绝对优先级，这个使用是因为当你使用外面的库时，这些库很可能会覆盖自己的样式，采用这种方法能够保证100%是当前定义的样式。

<style>   body{     background-color:black;   }   h1{     background-color:orange;   }   .red-ground{     background-color:red !important;   }   .green-ground{     background-color:green;   }   #yellow-ground{     background-color:yellow;   }</style><h1 class = “red-groundgreen-ground” id=”yellow-background”>hello world</h1>

这样这个背景就一定显示为红色。

        总的来说，CSS样式的继承优先级顺序为：body < 元素 < class < 后面的class < id < 行内样式 < !important，只要记住先定整体样式，再局部修改。