先看computed面板中被划掉的属性，再切回styles面板确认带删除线的规则被覆盖；主因是css加载顺序错位（如style.css在bootstrap.min.css之后引入）或scoped/css-in-js作用域隔离。
检查Computed Styles里哪条规则被划掉了
打开开发者工具，选中一个样式异常的元素（比如按钮没圆角、文字没颜色），切到Computed面板，找你想看的属性（如border-radius或color），点开它看来源文件。再切回Styles面板，如果那行规则上打着删除线（strikethrough），说明它被后面加载的同名规则覆盖了——大概率是你的style.css在bootstrap.min.css之后引入，或者构建工具把自定义样式插到了head末尾。
确认标签顺序是否为 bootstrap → 自定义 CSS
HTML 中 CSS 加载顺序直接决定层叠结果，和选择器权重无关。哪怕你写了.btn { border-radius: 8px !important; }，只要它出现在bootstrap.min.css之前，照样会被盖掉。
- ✅ 正确写法：
<link href="bootstrap.min.css"> <link href="style.css"> - ❌ 错误写法：
<link href="style.css"> <link href="bootstrap.min.css"> - Webpack/Vite 项目里，检查 JS 入口文件是否先
import 'bootstrap/dist/css/bootstrap.min.css'，再import './style.css' - 用
<style></style>标签写覆盖规则？它默认插入head最末，天然晚于外部，慎用
排查是否用了 scoped 或 CSS-in-JS 导致作用域隔离
Vue 单文件组件加了scoped，或 React 用了styled-components，它们生成的类名带哈希后缀（如btn__a1b2c），而 Bootstrap 的.btn是全局类，不会自动应用到你组件内部——但反过来，你在<style scoped></style>里写的.btn { color: red; }也根本不会匹配到 DOM 上的.btn，因为那个元素不在该组件的作用域内。
- 想让 Bootstrap 样式生效：确保目标元素没被包裹在
scoped或 Shadow DOM 隔离环境中 - 想覆盖 Bootstrap：要么去掉
scoped，要么用深度选择器（如 Vue 的:deep(.btn)） - CSS-in-JS 库默认不支持全局类注入，需显式启用
createGlobalStyle等机制
验证是否因 PurgeCSS / UnoCSS 误删了类名
现代构建流程常配purgecss、tailwindcss的content扫描或unocss的按需生成，如果配置没覆盖到 HTML 模板或 JS 中动态拼接的类名（比如class="btn btn-${type}"），那些类就会被干掉，样式自然消失。
- 临时关闭 PurgeCSS（Vite 中设
build.cssMinify: 'light'或注释掉purge配置）看是否恢复 - Tailwind 用户检查
content数组是否包含所有模板路径，例如content: ['./index.html', './src/**/*.{vue,js,ts}'] - UnoCSS 用户确认
include配置覆盖了实际使用类名的文件
真正卡住的地方往往不是“怎么写”，而是“谁在什么时候把什么塞进了head”——构建工具、模板引擎、CDN代理、甚至服务器端包含（SSI）都可能悄悄重排 link 顺序。动手前先看 Network 面板里最终加载的 HTML 是什么结构，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
