如何使用CSS覆盖Bootstrap 4代码？以轮播组件字体颜色修改为例

要覆盖Bootstrap的样式，核心是利用CSS优先级规则，同时确保自定义样式加载顺序正确。下面以修改轮播（Carousel）组件的字体和颜色为例，给出具体实现方法：

一、基础前提：样式加载顺序 #

确保你的自定义CSS文件在Bootstrap的CSS文件之后引入，这样同一优先级的样式中，自定义样式会覆盖Bootstrap的默认样式：

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 再引入自定义CSS -->
<link rel="stylesheet" href="custom.css">

二、针对轮播组件的具体样式覆盖 #

Bootstrap轮播的核心元素包括标题（.carousel-caption h5）、描述文本（.carousel-caption p）、控件箭头等，你可以通过精准的选择器来修改这些元素的样式：

1. 修改轮播标题的字体与颜色 #

.carousel-caption h5 {
  font-family: 'Arial', sans-serif; /* 自定义字体 */
  color: #ff6b6b; /* 自定义红色 */
  font-weight: 700; /* 可选：加粗字体 */
}

2. 修改轮播描述文本的样式 #

.carousel-caption p {
  font-family: 'Georgia', serif; /* 自定义字体 */
  color: #f8f9fa; /* 自定义浅白色 */
  font-size: 1.1rem; /* 调整字体大小 */
}

3. 针对特定轮播项的精准覆盖 #

如果只想修改某个特定轮播的样式，可以给轮播容器添加自定义类（比如custom-carousel），然后用更具体的选择器：

<div id="myCarousel" class="carousel slide custom-carousel" data-bs-ride="carousel">
  <!-- 轮播内容 -->
</div>

对应的CSS：

.custom-carousel .carousel-caption h5 {
  font-family: 'Helvetica Neue', sans-serif;
  color: #2d3436; /* 深灰色 */
}

4. 修改轮播控件的样式（可选） #

如果需要调整左右箭头的颜色：

/* 修改箭头图标颜色 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%); /* 将默认灰色箭头转为白色 */
}

/* 修改控件 hover 状态的颜色 */
.carousel-control-prev:hover,
.carousel-control-next:hover {
  color: #ffd93d; /* 自定义黄色 hover 效果 */
}

三、尽量避免使用!important #

虽然!important可以强制覆盖样式，但会破坏CSS的优先级层级，后续维护会更麻烦。推荐通过以下方式提升自定义样式的优先级：

• 增加选择器的特异性：比如用.carousel .carousel-caption h5代替单独的.carousel-caption h5
• 给目标元素添加自定义类：直接给标题添加<h5 class="carousel-custom-title">，然后写.carousel-custom-title { ... }

内容的提问来源于stack exchange，提问作者Waqas Jatt