border-style 的优先级由 CSS 层叠规则决定，单值/双值/三值/四值写法按顺时针赋值并整条替换，混合简写与单边属性时浏览器先展开简写再按权重合并。
border-style 的优先级由 CSS 层叠规则决定，不是“谁写在后面谁赢”
很多人以为 border-style: solid 和 border-style: dashed 写在同一选择器里，后写的就生效——其实不是。CSS 中 border-style 是一个简写属性，它会一次性覆盖所有方向（上/右/下/左）的样式值；真正起作用的是你给它的具体值形式，以及是否被更精确的选择器或 !important 干扰。
单值、双值、三值、四值写法直接影响各边样式
这是最容易踩坑的地方：你以为设了 border-style: solid dashed 就只是上下和左右不同，但实际它按顺时针顺序赋值，且缺省时会自动复制。比如：
-
border-style: solid→ 四边都是solid -
border-style: solid dashed→ 上下solid，左右dashed -
border-style: solid dashed dotted→ 上solid，左右dashed，下dotted -
border-style: solid dashed dotted double→ 各边独立：上/右/下/左
一旦某条规则用了四值写法，其他同名规则若只用单值，就会被完整覆盖——不是“部分覆盖”，是整条声明替换。
当多个 border-style 声明共存时，层叠顺序才是关键
常见错误现象：div { border-style: solid; } .active { border-style: dashed; }，但元素加了 .active 类却还是实线。原因可能是：
立即学习“前端免费学习笔记（深入）”；
- 两个规则选择器权重相同，后出现的生效（此时
dashed应该赢） - 但若
div规则带!important，而.active没有，则solid保留 - 或者存在内联样式：
style="border-style: solid;"，它默认比普通 CSS 规则权重高 - 还有可能是继承问题：
border-style不继承，所以父元素设了也没用
验证方法很简单：打开 DevTools，看 Computed 面板里 border-top-style 等单边属性最终取值，再点开来源，就能看到哪条声明胜出。
别依赖 border-style 简写去“微调”某一边
想只改底边为 double，其他保持 solid？别用 border-style: solid solid double solid。这种写法脆弱、难读，而且一旦后续加了 border-left-style: none 这类单独设置，就容易互相覆盖出错。
- 推荐直接用单边属性：
border-bottom-style: double - 这样语义清晰，不干扰其他边，也方便后续维护
- 注意：单边属性优先级和简写属性相同，都属于同一层声明，谁权重高谁生效
真正复杂的是混合使用简写和单边属性时的覆盖逻辑——浏览器会把简写展开成四个单边值，再和已有的单边声明按权重合并。这个过程不可见，但 DevTools 的 Styles 面板会如实显示最终结果。
