CSS样式未生效主因是权重不足或加载顺序靠前，需通过开发者工具检查computed styles和来源，优先用更具体选择器而非!important。
为什么 style 标签里的样式没生效
不是写错了，也不是浏览器 bug，大概率是被其他规则“压”住了。CSS 会按权重（specificity）和加载顺序做最终决定，<style> 里写的规则如果权重不够，又没加 !important，就可能被外链 CSS 或更高优先级的选择器覆盖。
常见错误现象：div { color: red; } 写在 <style> 里，但页面上文字还是黑色；审查元素发现它被划掉，旁边显示来自 main.css 的同名规则。
- 检查开发者工具中该样式是否被 strikethrough，点开「Computed」看最终生效的是哪条规则
- 避免直接用标签名或类名覆盖第三方库（比如
.btn），改用更具体的选择器，例如body .my-container .btn - 如果必须强覆盖，优先加属性选择器或伪类提升权重，比如
.btn[data-type="primary"]，而不是无脑堆!important
link 和 style 的加载顺序怎么影响样式结果
后加载的样式表里定义的相同选择器，会覆盖先加载的——但前提是权重一样。这个“后加载”指 HTML 中出现的顺序，不是网络请求完成时间。
使用场景：项目用了 UI 框架（如 Bootstrap），你又想局部调整按钮颜色，把自定义 <style> 放在 <link rel="stylesheet" href="bootstrap.css"> 后面才有效。
立即学习“前端免费学习笔记（深入）”；
-
<link>必须放在<head>内，且顺序靠后；<style>同理，不能塞在<body>底部指望它覆盖前面的 - 动态插入的
<link>或<style>（比如 JS 创建）默认追加到<head>末尾，通常能覆盖已有规则，但要注意 DOM 插入时机是否早于框架初始化 - 注意 HTTP/2 下多个
<link>并发加载，但解析和应用仍按 HTML 顺序，不按响应先后
id、class、标签名这些选择器的权重怎么算
权重不是“谁写在后面谁赢”，而是按四元组计算：(a,b,c,d)，其中 a=内联样式数，b=id 数，c=类/属性/伪类数，d=标签/伪元素数。比较时从左到右逐位比，大者胜。
例如：#header .nav li.active a 是 (0,1,2,2)，而 div#main ul li a 是 (0,1,0,4)，前者胜出，尽管后者标签更多。
-
!important不参与权重计算，但它让声明脱离常规层叠逻辑，仅用于调试或不可绕过的情况 - 避免用
div div div .btn这种方式提权，既难维护又易被更高权重规则反杀 - 用
:is()或:where()包裹选择器时，权重取内部最高项，不是叠加，比如:is(.a, #b) .c权重等同于#b .c
Webpack/Vite 等构建工具里 CSS 覆盖失效的典型原因
构建工具常把 CSS 提取、压缩、作用域化，导致你写的样式实际没进 DOM，或被自动加了 scoped 属性，或被提取到单独文件后加载顺序变了。
常见错误现象：Vue 单文件组件里 <style scoped> 中的规则无法影响子组件；或者 Vite 项目中 import './index.css' 没效果，但手动 <link> 就行。
- Vue 的
scoped会为选择器加属性（如[data-v-f3f3eg9]），子组件样式不会穿透，要用::v-deep或:deep()显式降级 - Vite 默认启用 CSS 提取插件，
import语句可能被转成异步加载，若依赖它的 JS 先执行，样式还没注入，就会短暂失样式 - Webpack 的
mini-css-extract-plugin会把 CSS 抽成独立文件，需确认html-webpack-plugin是否正确注入，且位置在<head>内
真正麻烦的从来不是“怎么写”，而是“谁在什么时候、以什么权重、往哪儿写了”。查不到问题，多半是因为只看了自己写的那行，没打开开发者工具看 computed styles 和 source 列表里那一长串来源。
