uni css提高权重 css增加权重

作者：花森

认识

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

元素权重

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

规则	粒度
ID	0100
class和类属性值	0010
标签和伪元素	0001
*	0000
行内样式2	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>

网站推荐

花森酱导航：n.huasenjio.top

有一点自卖自夸了，但是真的很不错，十分合适学习办公，简洁无广告，可以自定义收录的网站。很多不常用的软件可以直接使用网页版，现在网页技术也很发达了，你根本体会不到区别，推荐自己的网站，收录成为浏览器主页的教程网站里面也有，也希望大家支持！特别感谢小呆哥的支持！

桌面美化

使用了几个占用内存很小的软件，就能让桌面变得好看整洁（小黑框可以存放应用快捷打开），这个篇幅太大了，不好再码字了，我另写一篇关于美化的吧，同样也是在我的这个博客，喜欢的可以直接私聊也行！