HTML中添加CSS有三种方式：内嵌（style标签）、内联（style属性）和外链（link标签）；优先级按权重计算，!important最高，其次为内联、ID、类/伪类/属性、标签/伪元素；布局问题可用开发者工具定位；CSS加载顺序影响覆盖规则，但仅限相同优先级时生效。
怎么在HTML里加CSS样式
直接写 标签最简单，放 里就行：
.box { width: 200px; background: #eee; }
也可以用 style 属性内联写，适合单个元素临时改：
紧急提示
外链样式表更规范，但要注意路径别写错：
如果 main.css 实际在 assets/css/ 下，就会白加载——浏览器控制台 Network 标签页里能看到 404。
立即学习“前端免费学习笔记（深入）”；
CSS选择器优先级怎么算出来的
浏览器不是“谁在后面谁赢”，而是按权重加总：
-
!important最高（不推荐滥用） - 内联
style算 1000 - ID 选择器（如
#header）算 100 - 类、伪类、属性选择器（如
.btn、:hover、[type="text"]）各算 10 - 标签、伪元素（如
div、::before）各算 1
比如：
.container .item:hover { color: blue; } /* 10 + 10 + 10 = 30 */
#nav .item { color: red; } /* 100 + 10 = 110 */
后者优先级更高，哪怕它写在前面，.item 文字还是红色。
布局乱了，怎么快速定位是哪段CSS在捣鬼
打开浏览器开发者工具（F12），选中出问题的元素，看右边 Styles 面板：
