样式不生效主因是选择器权重不足或规则未被读取，需核对类名拼写、嵌套结构、CSS语法及作用域，优先通过开发者工具Elements面板验证规则匹配与覆盖情况。
自定义CSS文件已放在Bootstrap之后，但样式仍不生效
大概率不是加载顺序问题，而是你的选择器权重不够，或者浏览器根本没读到那条规则——比如类名拼错、作用域被限制、或样式被!important压制了。
.carousel-item这类标准类名写错或结构不匹配
Bootstrap 5 的轮播容器必须用 .carousel-item，写成 .c-item、.carousel-item-active 或 .item 都不会命中。同时要确认 HTML 中确实存在该 class 的元素，且未被 JS 动态移除或替换。
- 检查开发者工具 Elements 面板里目标元素的 class 列表，逐字核对是否完全一致
- 避免在父级加多余 wrapper（如
<div class="carousel-inner"><div><div class="carousel-item">），Bootstrap 的 CSS 规则依赖特定嵌套关系 -
.carousel-item默认是display: none，只有当前激活项才显示；若想统一设高宽，直接写.carousel-item { height: 280px; }即可，无需加:not(.carousel-item.active)
选择器权重太低，被 Bootstrap 覆盖
.carousel-item img 这种写法只有 2 类 + 1 元素（specificity = 0,2,1），而 Bootstrap 很多规则是 .carousel-item > img（0,2,1）或带 !important，结果就是你的样式赢不了。
- 改用带自定义 class 的方式：
<img src="..." class="c-img">，再写.c-img { height: 100%; object-fit: cover; } - 避免用元素选择器（如
img、button）开头，哪怕加了父级 class，也容易被更具体的选择器压制 - 不要轻易加
!important—— 它会掩盖真正的问题，且未来维护成本陡增
样式文件虽加载成功，但实际未应用
Network 面板看到 200 OK 不代表样式生效：可能文件内容为空、CSS 语法错误导致整段被忽略、或被 Shadow DOM / CSS-in-JS 作用域隔离。
立即学习“前端免费学习笔记（深入）”；
- 点击 Network 中的
style.css请求，看响应体是否真有你写的规则（比如搜carousel-item） - 打开 Elements 面板，选中目标元素，右侧 Styles 面板里找你的规则 —— 如果压根没出现，说明没匹配上；如果出现但被划掉，说明被更高权重规则覆盖
- React + Bootstrap 场景下，若用
import './style.css'，确保它不在组件内部（会被 scoped），而是在入口文件（如index.js）全局导入
