CSS样式不会自动关联HTML，必须用<link rel="stylesheet" href="...">显式引入且置于<head>内，路径需相对HTML文件位置正确，否则样式静默失效。
CSS 样式表不会自动关联 HTML 文档，必须显式声明连接方式，否则浏览器只渲染纯结构——连 background-color 都不会生效。
link 标签必须写在 head 里且带 rel="stylesheet"
这是最常见也最容易出错的环节。很多初学者把 <link> 放进 <body> 底部，或漏掉 rel="stylesheet"，结果样式完全不加载，浏览器也不报错，只静默回退到默认样式。
-
<link rel="stylesheet" href="css/style.css">必须出现在<head>内，且最好在<title>之后、<script>之前 - 路径是相对于 HTML 文件位置计算的，比如 HTML 在根目录、CSS 在
css/子目录，就得写href="css/style.css"，不是href="/css/style.css"（除非你明确用了绝对路径） - 检查开发者工具 Network 面板：
style.css状态码要是200，不是404或blocked
class 和 id 不是“加了就能用”，得匹配真实 DOM 结构
写 .card { padding: 1rem; } 没用，除非 HTML 里真有 <div class="card">。更隐蔽的问题是：语义标签没用对，导致选择器失效。
- 用
<header>就别再套class="header"；直接写header { margin-bottom: 1rem; }更可靠 - 避免靠 class 名硬“套样式”，比如
.btn同时用在<button>、<a>、<span>上——它们默认行为不同，后续维护极易失控 - 优先用属性选择器增强鲁棒性：
nav a[href]比.menu-link更不容易断，因为href是 HTML 属性，不是人工维护的类名
内联 style 属性会覆盖外部 CSS，但不该用来“调试”
很多人用 style="color: red;" 临时看效果，结果忘了删，最后发现明明写了 p { color: blue; } 却不生效——因为内联样式的优先级最高。
立即学习“前端免费学习笔记（深入）”；
-
style属性只作用于当前元素，无法复用，也不走缓存，上线前必须清理 - 调试时用开发者工具的 Styles 面板临时改值，比手敲
style属性安全得多 - 真正需要单次覆盖的场景（比如 CMS 输出的富文本），用
[data-rich-text] p这类带属性的选择器，比依赖内联更可控
HTML 语义错误会让 CSS 失效得毫无征兆
比如把 <main> 写成 <maine>，或者 <nav> 里嵌了 <div> 再套 <ul>，表面看页面正常，但 nav ul li 这种基于结构的选择器就断了。
- 浏览器不会报错，DOM 树照样生成，只是节点类型不对——
document.querySelector('nav')返回 null，CSS 自然不匹配 - 用浏览器 Elements 面板右键检查元素，确认标签名拼写、嵌套层级是否和选择器一致
- 语义错误还会拖累无障碍访问和 SEO，不是“样式能出来就行”的问题
真正卡住人的从来不是语法，而是 HTML 结构和 CSS 选择器之间那层看不见的映射关系——它既不报错，也不提示，只在你改了十遍样式却没反应时，默默告诉你：先去看一眼 DOM 树长什么样。
