元素权重

权重应用

ID	0100
class，类属性值	10
标签,伪元素	1
*	0
行内样式	1000

强制优先级

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

  h2 {
      color: green;
  }
</style>

<h2>HDCMS</h2>

less

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

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

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

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

将转换成：

main article h1 {
  color: red;
}

继承规则

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

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

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

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