CSS标签权重

/ CSS / 没有评论 / 447浏览

认识

一个项目中会引入很多的样式,样式之间会出现重叠覆盖,导致我们需要的效果无法做出,这时候就要学习一个样式的权重问题,权重高的样式优先展示。

元素权重

使用类、ID、伪类都有不同的权重,具体应用哪条规则要看权限大小。可以使用!important强制提升某个设置的权限。

规则粒度
ID0100
class和类属性值0010
标签和伪元素0001
*0000
行内样式1000

1)id的权重高于class

<style>
	/*权重10*/
  .color {
  	color: red;
  }
	/*权重100*/
  #hot {
  	color: green;
  }
</style>
    
<h2 class="color" id="hot">HuaSen</h2>

2)属性权重

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

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

<article>
	<h2 class="color" id="hot">花森</h2>
</article>

权重的提升

通过!important提高权重为最高,内联样式都能被干掉。

<style>
      /* 权重1 */
      h2 {
        color: red !important;
      }
      /* 权重2 */
      div h2 {
        color: green;
      }
</style>
<article>
	<div>
  	<!-- 红色 -->
  	<h2 class="color" id="hot" style="color: gold;">花森</h2>
  </div>
</article>

LESS类型

嵌套写法能够有效避免对权重的思考,使用less语法是一个很棒的注意,一般会通过插件编译写的.less文件,自动生成.css文件。

main {
    article {
        h1 {
            color: red;
        }
    }
}

对应生成的css文件

main article h1 {
  color: red;
}

继承规则

子元素可以继承父元素的规则,但是并不是所有的样式都能够继承,例如:边框、高度等规则不会继承,继承的规则没有权重。

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

<article>
	<!-- h2继承了article的color样式但没有继承边框 -->
	<h2>后盾人老师<span>思路清晰的教学</span></h2>
</article>

通配符

因为通配符的权重为0,会给所有的标签属性添加规则。继承所得的样式是无权重,所以会造成如下问题继承元素无效果,显示通配符*的规则。

<style>
  * {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>花森 <span>简洁的资源导航</span></h2>
</article>