CSS样式未生效主因是优先级被覆盖，行内样式权重最高，ID选择器＞类选择器＞标签选择器，可用DevTools Styles面板查看被划掉的规则及来源。
style 属性写对了，样式却没生效？不是代码错了，是优先级被覆盖了。CSS 样式生效与否，不看谁“写得晚”，而看谁“权重高”。
行内样式为什么总能赢？
因为 style 属性天然拥有最高来源优先级 —— 它比 <style> 标签、外部 .css 文件甚至它们里面的 !important 都高。
常见错误现象：
- 在外部 CSS 里写了
#header { color: red !important; }，但 HTML 中<div id="header" style="color: blue;">还是显示蓝色 - 用 JavaScript 动态设置
element.style.color = 'green'，结果发现旧样式还在生效（其实是没清掉内联值）
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 临时调试：快速验证某条样式是否起作用
- 服务端渲染时注入动态值（如用户主题色）
- Canvas 或 SVG 元素的坐标/尺寸控制（需 JS 驱动）
注意：style 是字符串，JS 修改时要拼全属性名，比如 el.style.marginTop = '8px'，不能只写 marginTop: '8px'。
<style> 和 <link rel="stylesheet"> 的区别在哪？
两者都属于“内部样式表”和“外部样式表”，但加载时机与作用域不同。
关键差异：
-
<style>在 HTML 文档内，解析时同步执行，无额外请求，适合首屏关键样式 -
<link rel="stylesheet">触发 HTTP 请求，浏览器会阻塞渲染直到 CSSOM 构建完成，但利于缓存和复用 - 同为“文档内样式”，
<style>的选择器特异性（specificity）和.css文件完全一致，不因位置而变
容易踩的坑：
- 把大量 CSS 写进
<style>导致 HTML 文件膨胀，影响首屏传输效率 - 用
@import在<style>里引入外部文件（已废弃），会阻塞并降低优先级 -
<link>路径写错（如漏掉./或大小写不匹配），控制台报Failed to load resource，但样式静默失效
ID、类、标签选择器的优先级怎么算？
CSS 选择器优先级不是“谁写在后面谁赢”，而是按“特异性（specificity）”数值比大小：ID > 类 > 标签。
计算规则（a,b,c 计数）：
- a =
!important数量（仅同源比较时有效） - b = ID 选择器个数（如
#nav #menu算 2） - c = 类 / 伪类 / 属性选择器个数（如
.btn.active:hover算 3） - d = 标签 / 伪元素个数（如
div p::before算 3）
示例对比：
div#main .content a { color: blue; } /* b=1, c=2, d=2 → 0,1,2,2 */
#main .nav a:hover { color: red; } /* b=1, c=2, d=2 → 0,1,2,2 */
/* 两者特异性相同，后出现的生效 */性能提示：高特异性选择器（如 #app #header .nav li a）不仅难维护，还会拖慢浏览器样式匹配速度。
什么时候该用 !important？
它不是“强制生效开关”，而是“打破层叠规则的紧急出口”。滥用会让调试变成猜谜。
合理使用场景：
- 第三方 UI 库插入的内联样式（如某些 React 组件的
style）无法修改源码时，用!important覆盖 - 用户自定义样式表（user stylesheet）中干预页面行为（极少见）
- 临时加在开发者工具里验证问题，改完必须删掉
重要限制：
-
!important不继承，也不影响其他属性 - 两个
!important同时存在，仍要按来源和特异性排序 - 行内样式带
!important是无效语法（style="color:red !important"会被忽略）
真正难处理的，往往不是“怎么让样式生效”，而是“为什么这个样式被悄悄覆盖了”。打开 DevTools 的 Styles 面板，盯着被划掉的那行，看右边的来源标记 —— 那才是真相所在。
