为什么CSS简写属性会覆盖掉原本单独设置的值？

简写属性会强制重置未声明的子属性为初始值，这是CSS规范行为而非bug；如background、border、font等简写会覆盖先前单独设置的子属性，transition简写必须完整或明确省略后项，grid简写不设置auto行列，align-self通过继承机制覆盖align-items。

因为简写属性会把所有未显式声明的子属性重置为初始值，不是“漏设”，而是浏览器规范强制的行为。

background、border、font 这类简写会清空未出现的子属性

比如你先写了 background-color: red;，再写 background: url(logo.png) no-repeat;，结果背景色没了——background 简写没提颜色，浏览器就按规范把 background-color 设为 transparent（它的初始值）。

同理：border: 1px solid #000; 会让 border-top-width、border-bottom-style 全部变成 1px solid #000，哪怕之前只设了 border-bottom: 2px dashed blue;，也会被覆盖掉。

1. font 简写会把 font-weight、font-style 全设为 normal，即使你前面单独写了 font-weight: bold;
2. margin 或 padding 简写时若只写三个值（如 margin: 10px 20px 30px;），浏览器会自动补第四值为第二个值（即右=左），但不会保留之前用 margin-top 单独设过的值
3. 所有这类行为都来自 CSS 规范，不是浏览器 bug，也无法靠权重或顺序绕过

transition 简写必须写全四个部分，否则 property 会被设成 none

你写 transition: all 0.3s ease; 没问题；但之后又加一句 transition-delay: 1s;，整个过渡就失效了——因为第二句没带 property，浏览器把它当成了 transition-property: none，而简写规则是“全有或全无”。

1. 合法简写格式只能是：transition: <property> <duration> <timing-function> <delay>;
2. 可省略后两项（如 transition: opacity 0.2s;），但不能跳写（比如只写 transition: 0.2s; 就等价于 transition-property: none）
3. 多个属性过渡要用逗号分隔：transition: width 0.3s, opacity 0.2s;，不能用分号

grid 和 align-self 的“覆盖”逻辑完全不同

grid 简写（如 grid: "a a" "b c" / 1fr 2fr;）会同时设置 grid-template-areas 和 grid-template-columns，但它不设置 grid-auto-columns 或 grid-auto-rows——这两个仍保持默认值 auto，容易导致新增网格项宽度/高度异常。

而 align-self 能覆盖 align-items，是因为它是专为单个 flex/grid 项设计的高优先级属性，且默认值 auto 表示“继承父级”，不是“不生效”。但前提是：父容器得是 display: flex 或 grid，交叉轴要有尺寸，子项不能是 position: absolute。

1. grid-area 是独立属性，写在 grid 简写里不会生效，必须单独给子元素加
2. align-self: center 是强制覆盖，align-self: auto 等价于没写——它不取消继承，只是明确说“我要跟父级一样”

真正容易被忽略的点是：这种覆盖不依赖选择器权重，也不看声明顺序，而是由 CSS 层叠规则中“简写属性对子属性的重置机制”直接决定。调试时别只盯 Styles 面板，一定要看 Computed 值里每个子属性实际是什么——很多 bug 就藏在那个被悄悄设回 initial 的值里。