CSS 优先级是如何工作的🤹🏼♀️
（重要性并非推荐项）
我们已经知道 CSS 代表层叠样式表。
层叠样式表的真正含义是，浏览器首先会确定需要将哪个样式表应用于 HTML。例如，我们看到
链接显示为蓝色，这是浏览器的默认样式。
我们来谈谈特异性。
特异性是指我们在声明 CSS 时应用的权重。
权重实际上指的是我们如何将样式应用于特定的 HTML
元素。
例如，我们使用 id 属性来定位 Html 元素，或者使用
class 属性，有时我们直接使用元素名称（如 h1、p）来应用
样式。
这里的区别在于我们使用不同的选择器来应用样式。
但浏览器是根据元素的权重来应用样式的。
重量
- 首先是内联 CSS
- 第二个ID
- 三等
- 第四元素/伪类/伪选择器
如果我们使用任何选择器对元素应用样式，那么如果我们只是放置一个内联 CSS，它会覆盖之前使用 id、class 或 element 应用的所有样式。
（重要性并非推荐项）
如果我们在任何选择器中添加 !important，那么 !important 会覆盖之前添加到该元素的所有其他样式。
请查看我在 CodePen 上的演示，我已清晰地展示了这一点。fork 这个代码示例，然后通过移除重要的内联 CSS、id 等元素来查看更改……
文章来源：https://dev.to/sait/how-css-specificity-works--2e2e