前言
为什么我写的样式不生效？为什么那个单位在移动端会缩放？理解 CSS 的优先级（Specificity）和度量单位，是每一个前端开发者从“画页面”走向“精通布局”的必经之路。
一、 CSS 优先级（权重）全解析
CSS 样式的应用遵循“就近原则”和“权重计算原则”。
1. 权重等级排列
我们将不同选择器划分为不同的等级：
!important：无视规则，权重最高。- 行内样式 (Inline style) ：写在标签
style属性里的样式。 - ID 选择器：如
#header。 - 类、伪类、属性选择器：如
.content、:hover、[type="text"]。 - 元素（标签）、伪元素选择器：如
div、::before。 - 通用选择器 (*) 、子选择器 (> )、相邻选择器 (+)：权重极低（通常计为 0）。
- 继承的样式：权重最低。
2. 权重计算法（三位计数法）
为了方便对比，我们可以给它们分配分值（非绝对数值，仅作逻辑参考）：
- ID 选择器：100
- 类/属性/伪类：10
- 标签/伪元素：1
规则：从左往右比较，数值大的获胜。如果数值相等，则后者覆盖前者。
⚠️ 注意：
!important是“核武器”，如果它用于简写属性（如background: !important），则其包含的所有子属性（color, image 等）都会获得最高权重，应谨慎使用。
二、 CSS 常用度量单位
根据参考参照物的不同，单位可分为以下几类：
1. 绝对单位
- px (像素) ：最常用的基本单位，物理像素点，不随环境改变。
2. 相对单位（基于字体）
-
em：相对于当前元素的
font-size。- 注意：如果当前元素未设置，则参考父元素；如果整个页面都没设置，则参考浏览器默认值（16px）。
-
rem (Root em) ：相对于根元素 (
<html>) 的font-size。是移动端适配的首选。
3. 相对单位（基于视口）
- vw / vh：相对于浏览器可视窗口的宽度/高度。
1vw等于视口宽度的 1%。 - % (百分比) ：通常相对于父元素的对应属性（宽度、高度等）。
三、 现代布局黑科技
1. calc() 计算属性
允许在声明 CSS 属性值时执行加减乘除运算。
- 语法：
width: calc(100% - 20px); - 注意：运算符前后必须保留空格。
2. aspect-ratio 设置宽高比
过去我们需要用 padding-top 技巧来实现等比缩放，现在一行代码搞定：
.box {
width: 500px;
aspect-ratio: 16 / 9; /*这时的宽高比就为16比9*/
background: lightblue;
}
四、 总结：优先级冲突时的排查思路
- 看
!important：有没有被强行置顶。 - 算权重值：ID > 类 > 标签。
- 看顺序：权重相同时，写在后面的样式生效。
- 看距离：行内样式 > 内部/外部样式表。
- 看加载：内部样式和外联样式的优先级，取决于它们在 HTML 中出现的先后顺序。
