如何通过普通CSS修改Bootstrap5导航栏各元素颜色

直接给a标签设置样式没效果，问题出在两点：

• 自定义CSS引入顺序错误：当前代码先加载自定义style1.css，再加载Bootstrap的CSS，相同优先级下后加载的样式会覆盖前面的规则
• 选择器权重不足：Bootstrap给导航栏内的链接、品牌标识、切换按钮都写了专属类选择器样式，权重比通用a标签选择器高，无法覆盖默认样式

第一步：调整CSS引入顺序 #

把HTML头部的CSS引用顺序调整，所有第三方库样式放前面，自定义样式放最后加载，保证自定义规则不会被前置的库样式覆盖：

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" href="./images/titleiconw.png" sizes="32*32" />
  <!-- 第三方样式优先引入 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <!-- 自定义样式最后引入 -->
  <link rel="stylesheet" href="/style1.css" />
  <title>Corporate Solutions</title>
</head>

如果不想频繁写!important强制覆盖，可以直接把nav标签上的navbar-light bg-light两个默认类删掉，后续自定义样式可以直接生效。

第二步：添加对应元素的自定义样式 #

把下面的代码加到style1.css文件末尾，颜色值可以根据实际需求替换：

导航栏背景色修改 #

.navbar {
  /* 替换为需要的背景色，示例为品牌蓝色值 */
  background-color: #165DFF;
}

导航链接颜色修改 #

/* 普通状态链接颜色 */
.navbar .nav-link {
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
/* 激活状态的当前页链接颜色 */
.navbar .nav-link.active {
  color: #ffffff;
}
/* 鼠标悬停链接颜色，可按需保留 */
.navbar .nav-link:hover {
  color: #ffffff;
}

品牌标识（navbar-brand）颜色修改 #

.navbar .navbar-brand {
  color: #ffffff;
  font-weight: 700;
}
/* 品牌名首字母单独设色，可按需保留 */
.navbar .navbar-brand span {
  color: #FFD700;
}
.navbar .navbar-brand:hover {
  color: #ffffff;
}

汉堡菜单按钮及图标颜色修改 #

/* 汉堡按钮边框颜色 */
.navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.5);
}
/* 汉堡三横线图标颜色，修改stroke属性内的rgba值即可换色，注意格式不要写错 */
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

之前写的全局a标签样式如果是给非导航栏的链接使用，可以直接保留，上面的导航栏专属样式因为选择器优先级更高，只会作用在导航栏元素上，不会和全局样式冲突。

内容的提问来源于stack exchange，提问作者Amr El-Nagdy