自定义css不起作用主因是加载顺序和选择器权重：必须将自定义css放在bootstrap之后加载，且优先使用高权重类名（如.c-img）而非低权重元素选择器（如.carousel-item img）。
自定义CSS样式不起作用，大概率不是写错了，而是没赢过Bootstrap的默认规则——关键在加载顺序和选择器权重。
自定义CSS必须放在Bootstrap CSS之后加载
浏览器按 <link> 标签顺序解析样式表，后加载的规则才有机会覆盖先加载的。Bootstrap的重置和基础样式非常强，如果你的 style.css 在它前面引入，几乎全部会被忽略。
- ❌ 错误写法：
<link href="css/style.css">在 Bootstrap<link>之前 - ✅ 正确写法：确保 Bootstrap 的 CDN 或本地 CSS 是第一个
<link>，你的自定义文件紧随其后 - ⚠️ Django 用户注意：
{% static 'css/style.css' %}路径要真实存在，且服务端能返回 200 状态码；用开发者工具 Network 面板确认该文件是否真的加载成功
.carousel-item img 和 .c-img 的选择器权重差异
直接给 img 写样式（比如 .carousel-item img { height: 100%; }）容易被 Bootstrap 内联样式或更具体的选择器压制；而用自定义类名（如 .c-img）并配合 object-fit，控制力更强、更稳定。
- ❌ 低权重示例：
.carousel-item img—— 仅 2 类选择器 + 1 元素，易被.carousel-item > img或带!important的规则覆盖 - ✅ 推荐做法：给图片加 class，例如
<img src="..." class="c-img">，再写.c-img { height: 100%; width: 100%; object-fit: cover; } - ? 小技巧：如果必须用元素选择器，可微调权重，比如写成
.carousel-item .c-img或.carousel .carousel-item .c-img，但不如直接加 class 干净
浏览器开发者工具里怎么看谁赢了
打开 Elements 面板，选中一个有 Bootstrap 类的元素（比如 <button class="btn btn-primary"></button>），看右侧 Styles 面板里哪些规则被划掉、哪些生效——被划掉的，就是被更高优先级规则干掉了。
- ? 查找来源：点击某条 CSS 规则旁的文件名（如
bootstrap.min.css:123或style.css:45），快速定位是哪一行在起作用或作废 - ⚖️ 比较权重：鼠标悬停在规则上，DevTools 有时会显示 “specificity: 0,1,1,1” 这类值；数字越大，优先级越高（内联样式 > ID > class/伪类 > 元素/伪元素）
- ? 别迷信
!important：它能强行提权，但会让后续维护变困难，尤其多人协作时；优先用更具体的选择器代替
真正卡住人的，往往不是“不会写CSS”，而是没意识到浏览器根本没读到你的规则，或者读到了但立刻被另一条更重的规则盖过去了——所以每次改完样式，务必去 Elements 面板里点开那个元素，亲眼确认你的那行代码到底有没有参与计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
