这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

本篇文章将介绍CSS较为深入的内容，主要包括选择器优先级、继承和初始值。

选择器优先级

哪条规则生效

<article>
    <hl class="title">拉森火山国家公园</h1>
</article>

<style>
    .title {
        color: blue;
    }
    
    article h1 {
        color: red;
    }
</style>

选择器的特异度(Specificity)

特异度是一种权重，它是由匹配选择器中每种选择器类型的数量决定的，用来应用于某个CSS声明。当同一个元素被多个声明目标时，特异度才会起作用3。具有最高特异度值的选择器优先级最高，它的样式声明会被应用到该元素上。

可以通过以下顺序，把每种选择器类型的数量加起来，来计算一个选择器的特异度：

• 行内样式具有最高的特异度，值为1000点。
• ID选择器具有第二高的特异度，每个值为100点。
• 类选择器、属性选择器和伪类选择器具有第三高的特异度，每个值为10点。
• 元素选择器和伪元素选择器具有最低的特异度，每个值为1点。
• 通用选择器、组合器和否定伪类对特异度没有影响，值为0点。

继承

CSS继承只适用于一些可以继承的属性，比如字体、颜色、文本等。一些不能继承的属性，比如边框、背景、尺寸等，如果没有设置值，就会使用它们的默认值。

可以使用inherit关键字，来强制一个元素继承它的父元素的某个属性的值。这样可以覆盖其他的样式规则，或者恢复默认的继承行为。例如，border: inherit;会让一个元素继承它的父元素的边框样式。

显示继承

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.some-widget {
    box-sizing: content-box;
}

初始值

• CSS中，每个属性都有一个初始值
  • background-color的初始值为transparent
  • margin-left 的初始值为0
• 可以使用initial关键字显式重置为初始值
  • background-color: initial