CSS样式被划掉主因是选择器权重不足而非代码错误，应优先提升特异性（如body .app .btn）而非滥用!important，因其更可控、可调试且不破坏层叠逻辑。
CSS样式被划掉，但你确认路径和语法都没错？大概率是加载顺序导致权重没赢，而不是代码写错了。
为什么提升选择器特异性比加 !important 更可靠
浏览器按 <link> 在 中的顺序解析 CSS，后加载的同权重规则自动覆盖前面的。如果你无法调整 HTML 中的引入顺序（比如用的是第三方模板、微前端子应用、或构建工具注入逻辑固定），硬改顺序不现实，这时提升选择器特异性是最可控的补救方式。
相比 !important，它不破坏层叠逻辑、不污染全局、调试时也能在开发者工具里清晰看到“谁赢了”，而且不会因后续新增样式而意外失效。
- 避免用
.btn { color: red; }去覆盖 Bootstrap 的.btn—— 权重完全一样，谁后加载谁赢 - 改用
body .my-app .btn或.header-nav .btn[data-role="primary"]，直接把特异性从 0,1,0 拉到 0,3,0+，稳压原生规则 - 伪类和属性选择器（如
:hover、[data-theme]）天然增加权重，且语义明确，比堆类名更轻量
哪些选择器组合能有效提权，又不至于失控
不是越长越好，关键是在最小改动下赢过目标规则。打开开发者工具的「Computed」面板，点开被划掉的那条样式，看它的来源选择器是什么，然后针对性加一层。
立即学习“前端免费学习笔记（深入）”；
- 目标是覆盖
.card .title（权重 0,2,0）？试试.page-main .card .title或.card[data-type="featured"] .title - 想改
input[type="text"]（权重 0,1,1）？用form.auth-form input[type="text"]或input[type="text"]:not([readonly]) - 慎用 ID：虽然
#header .logo权重高（1,1,0），但 ID 不可复用，且 Vue/React 中动态生成的 ID 可能不稳定
Vue / React 项目里 scoped 样式和外部框架冲突怎么办
Vue 单文件组件加了 scoped 后，<style scoped></style> 里的 .btn 实际编译成类似 .btn[data-v-f3f5f1]，它根本匹配不到 Bootstrap 提供的全局 .btn —— 所以你写的样式“看起来没生效”，其实是压根没作用到目标元素上。
- 想覆盖框架类，别写在
<style scoped></style>里，改用<style></style>（非 scoped）或单独的 CSS 文件，并确保它在中排在框架之后 - 如果必须在 scoped 内局部强化，用深度选择器：
.my-component :deep(.btn) { color: blue; }（Vue 3）或>>>（Vue 2） - React 中若用 CSS Modules，同理：不要指望
import styles from './Button.module.css'里的styles.btn能覆盖全局.btn；需额外引入非模块化样式表并控制其加载位置
真正难的不是“怎么加权重”，而是判断该在哪一层加——是加在组件内、页面级 CSS 里，还是交给构建工具统一注入。一旦开始依赖 !important 或无差别套多层父选择器，说明加载秩序已经失衡，该回头检查 <link> 排序或构建配置了。
