元素权重

元素权重

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

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

• 相同权重的规则应用最后出现的

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

权重应用

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

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

<style>
  .color {
  	color: red;
  }

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

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

属性权重的示例

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

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

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

行级权重优先级最高

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

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

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

强制优先级

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

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

  h2 {
 	 color: green;
  }
</style>

<h2>xinxinya</h2>

两条规则权限一样，默认应用第二个规则，但第一个规则使用了!important 提升了权限，所以被应用。

LESS

为了使 CSS 更易维护和扩展，并减少在书写规则时对权重的思考，使用 LESS 是不错的主意。

很多软件提供了自动生成 LESS 的功能，下面是在 VSCODE 中使用的方法。

1. 安装插件 easy-less 编译 LESS
2. 编辑扩展名为 .less 的文件将自动生成同名的 .css 文件。

下面是一个 LESS 的示例

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

将生成 css 文件如下

main article h1 {
  color: red;
}

继承规则

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

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

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

<article>
	<h2>xinxinya <span>欣欣吖</span></h2>
</article>

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

通配符

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

<style>
  * {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>xinxinya <span>欣欣吖</span></h2>
</article>

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