CSS样式优先级遵循就近原则与选择器权重，行内样式>内部样式>外部样式；选择器错误、缓存、作用域隔离和外边距合并是样式不生效的主因；display:none彻底移除元素，visibility:hidden保留占位，opacity:0支持过渡但会继承。
怎么用 CSS 给 HTML 元素设样式
直接写 style 属性最简单，但不推荐长期用；真正管用的是用 <style></style> 标签或外部 .css 文件。浏览器按“就近原则”应用样式：行内样式 > 内部样式 > 外部样式，但实际优先级还得看选择器权重。
常见错误是以为写了 color: red; 就一定生效——结果发现元素没变色，其实是被更高权重的规则覆盖了，或者父元素用了 color: inherit; 把颜色传下来干扰了。
- 行内样式：
<p style="font-size: 14px; margin: 0;"></p>—— 调试快，上线前得清掉 - 内部样式：
<style> p { font-size: 14px; } </style>—— 适合单页小项目 - 外部样式：
<link rel="stylesheet" href="main.css">—— 必须用，否则维护成本爆炸
CSS 选择器写不对，样式根本不会动
写错选择器是最常见的“样式不生效”原因。比如想选 class 是 btn-primary 的按钮，却写了 button.btn_primary（下划线不是中划线），或者漏了点号：btn-primary ≠ .btn-primary。
还有人用 div p 想选所有 <p></p>，结果只命中了嵌套在 <div> 里的段落，而忽略了同级的 <code><p></p>。真要全选，得用 p 或加通配前缀 * p（但别这么干，性能差）。
立即学习“前端免费学习笔记（深入）”；
-
.header匹配所有class="header"的元素 -
#nav只匹配id="nav"的那个唯一元素 -
input[type="text"]只对文本输入框生效，input则包括所有 input 类型 - 属性选择器带引号？
[data-id="123"]可以，[data-id=123]也行，但含空格或特殊字符必须加引号
display、visibility、opacity 都能“隐藏”，但效果完全不同
这仨常被混用，但行为差异很大：display: none 是彻底移出渲染流，不占空间；visibility: hidden 还占位置，只是看不见；opacity: 0 不仅看得见（截图能捕获），还能响应鼠标事件。
比如做弹窗遮罩层，用 opacity: 0 会导致背后按钮仍可点击；用 display: none 则动画无法过渡（CSS transition 不支持 display）；这时候得搭配 visibility + opacity 才行。
- 要完全移除且不参与布局 → 用
display: none - 要保留占位、配合 JS 控制显隐 → 用
visibility: hidden / visible - 要做淡入淡出动画 → 必须用
opacity，并确保元素没被display: none锁死 - 注意：
opacity会继承，子元素也会变透明，想避免就得重置子元素opacity: 1
为什么改了 CSS 却没看到效果
缓存、拼写、作用域三座大山。最常踩的是：改了 main.css，但浏览器加载的是缓存版本；或者在 Vue/React 里写了全局样式，却被 scoped style 或 CSS-in-JS 隔离了；再或者写了 margin-bottom，结果元素外边距没变化——其实是被父容器的 overflow: hidden 剪掉了（外边距合并+溢出裁剪）。
调试建议开浏览器开发者工具，点元素看右边 “Computed” 面板，找那条被划掉的样式，点旁边箭头就能看到是哪条规则把它干掉了。别猜，直接看。
- 强制刷新资源：Chrome DevTools 中右键刷新按钮 → “清空缓存并硬性重新加载”
- 检查是否被 scoped 影响：Vue 单文件组件里加
:deep(.xxx)，React 用className而非class - 外边距失效？试试
border: 1px solid transparent破坏外边距合并 - 字体不生效？确认
@font-face路径正确，且font-family名和引用名完全一致（区分大小写）
事情说清了就结束
