继承

某些属性会自动继承其父级元素的计算值，除非显示指定一个值。

例如在以下表情中，div 里面包含 p 标签。

<div style="color:red">
    <p>ABC</p>
</div>

如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。

初始值

浏览器可以指定一个本地CSS文件，打开所有页面时候自动加载。

我们会发现 h1、h2 标签字体的大小默认不被继承的。场景：如下代码给 div 父元素在设置一个字体属性12px，在div中添加一个h2标签，在浏览器中可以发现h2标签中的字体大小不会改变。原因是浏览器默认对 h1、h2 设置字体大小。这就是浏览器预设。

什么选择器在层叠中胜出取决于三个因素:

这些都是按重量级顺序排列的——前面的的一种会否决后一种

哪条规则生效

<article>
    <h1 class="title">标题</h1>
</article>

.title{
    color: blue;
}
article h1{
    color: red;
}

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

属性后插有 !important 的属性拥有最高优先级。若同时插有 !important 则再利用规则判断优先级。

color: blue !important;

* {
    box-sizing: inherit;
}
html{
    box-sizing: border-box;
}
.some-widget{
    box-sizing: content-box;
}