第三章搞定权重，写 CSS 样式更流畅

A.元素权重

1.权限场景与 ID 与 class 权重

可以使用  !important  强制提升某个规则的权限

规则	粒度
ID	0100
class，类属性值	0010
标签,伪元素	0001
*	0000
行内样式	1000

<style>
  .color {
  color: red;
 }

 #hot {
  color: green;
 }
</style>

<h2 class="color" id="hot">HDCMS</h2>

2.权重是可以计算的

<style>
 /* 权重:0021 */
 h2[class="color"][id] {
  color: red;
 }

 /* 权重:0012 */
 article h2[class="color"] {
  color: blue;
 }
</style>

<article>
 <h2 class="color" id="hot">HDCMS</h2>
</article>

<style>
 /* 权重:0012 */
 article h2[class="color"] {
  color: blue;
 }

 #hot {
  color: black;
 }
</style>

<h2 class="color" id="hot" style="color:green;">HDCMS</h2>

3.强制权重优先级!important

<style>
 h2 {
  color: red !important;
 }

 h2 {
  color: green;
 }
</style>

<h2>HDCMS</h2>

4.元素继承权重详解

子元素可以继承父元素设置的样式。

• 子元素并不是全部样式。比如边框、高度等并不会继承。
• 继承的规则没有权重

<style>
 article {
  color: red;
  border: solid 1px #ddd;
 }
</style>

<article>
 <h2>hdcms <span>内容管理系统</span></h2>
</article>

5.继承与通配符的博弈

• *（0）>继承(null)

<style>
 * {
  color: red;
 }

 h2 {
  color: blue;
 }
</style>

<article>
 <h2>hdcms <span>内容管理系统</span></h2>
</article>

6.使用预处理器 解决样式权重

Terms:less,sass