css系列-样式权重

样式权重

元素会被多个样式一层层作用，这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。

使用类、ID、伪类都有不同的权重，具体应用哪条规则要看权限大小。

• 相同权重的规则应用最后出现的
• 可以使用 !important 强制提升某个规则的权限

• 权重应用

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

  下面是ID权限大于CLASS的示例

• <style>
    .color {
    	color: red;
    }
  
    #hot {
    	color: green;
    }
  </style>
      
  <h2 class="color" id="hot">id权重大</h2>
  

  属性权重的示例

  <style>
    /* 权重:0021 */
    h2[class="color"][id] {
  		color: red;
    }
  
    /* 权重:0012 */
    article h2[class="color"] {
    	color: blue;
    }
  </style>
  
  <article>
  	<h2 class="color" id="hot">权重计算</h2>
  </article>
  

  行级权重优先级最高

  <style>
    /* 权重:0012 */
    article h2[class="color"] {
    	color: blue;
    }
  
    #hot {
    	color: black;
    }
  </style>
  
  <h2 class="color" id="hot" style="color:green;">行级权重最高1000</h2>
  

  强制优先级

  有时在规则冲突时，为了让某个规则强制有效可以使用 !important。

  <style>
    h2 {
   	 color: red !important;
    }
  
    h2 {
   	 color: green;
    }
  </style>
  
  <h2>强制提升优先级</h2>
  

  两条规则权限一样，默认应用第二个规则，但第一个规则使用了!important 提升了权限，所以被应用。!important主要用于覆盖行内样式。我们尽量不要使用!important,尽量用class。

继承规则

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

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

• <style>
    article {
      color: red;
      border: solid 1px #ddd;
    }
  </style>
  ...
  
  <article>
  	<h2>颜色继承 <span>继承article设置的颜色</span></h2>
  </article>
  

  上例中 h2 标签没有设置颜色样式，将继承 html 的颜色，并且边框没有产生继承。

我们也可以修改默认是否继承：

四个通用属性值

css 为控制继承提供了四个特殊的通用属性值，每个 css 属性都能使用这些值。

• inherit

设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

• initial

将属性的初始值应用于元素。实际上，就是“重置为默认值”。

• unset

将属性重置为自然值，也就是如果属性是自然继承的那么就是 inherit ，否则和 initial 一样。

• revert

表示使用样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于 unset 。（属性值 revert 目前只有很少的浏览器支持）

css3 增加了 all 属性，其值可以是上面四个之一，表示重置元素所有属性的值重置为其初始值，或继承值。

.test{
    all: initial;
    all: inherit;
    all: unset;
    all: revert; 
}

通配符

在开发中使用* 选择器会有一个问题。因为通配符的权限为0，而继承的规则没有权重，看以下代码产生的问题。

<style>
  * {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>蓝色 <span>颜色不发生变化</span></h2>
</article>

h2 中的span并没有继承 h2 的颜色，就是因为继承没有权重。而使用了 * 权重为0的规则。