使用Bootstrap时自定义CSS stylesheet优先级低于Inline CSS的解决办法

架构老林

2026-7-4

解决Bootstrap中外联CSS无法覆盖默认样式的问题

问题场景

尝试通过外部CSS文件修改页面样式（设置body背景色、指定容器margin）时样式完全不生效，只能依靠内联CSS实现效果，希望所有样式都统一放在外部样式表中。

初始HTML代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-light mt-4">
        <div class="container-fluid">
          <a class="navbar-brand" id="brandname" href="#">Mohit Tembhurkar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link p-4" href="#">Home</a>
                </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">Contact</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-lg" id="hireme">Hire Me</button>
        </div>
      </nav>
      <div class="container" id="hcon" >
        <div class="row">
          <div class="col-2">
            column 1
          </div>
          <div class="col-5">
            column 2
          </div>
          <div class="col-5">
            column 3
          </div>
        </div>
      </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

未生效的外部CSS代码

body {
 background-color: #fdf0d5;;
}

#hcon {
 margin: 150px;
}

临时解决方案（内联CSS）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body style="background-color: #fdf0d5;">
    <nav class="navbar navbar-expand-lg bg-body-light mt-4">
        <div class="container-fluid">
          <a class="navbar-brand" id="brandname" href="#">Mohit Tembhurkar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link p-4" href="#">Home</a>
                </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link p-4" href="#">Contact</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-lg" id="hireme">Hire Me</button>
        </div>
      </nav>
      <div class="container" style="margin: 150px;" >
        <div class="row">
          <div class="col-2">
            column 1
          </div>
          <div class="col-5">
            column 2
          </div>
          <div class="col-5">
            column 3
          </div>
        </div>
      </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

问题原因及解决方法

1. 调整样式文件引入顺序

当前你的style.css在Bootstrap样式表之前引入，而CSS规则中后加载的样式优先级更高，导致Bootstrap的默认样式覆盖了自定义样式。

解决办法：将自定义样式表的引入放在Bootstrap样式表之后：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

2. 提升选择器优先级

如果调整顺序后仍有样式不生效，可以通过增强选择器的特异性来提高优先级：

对body样式，使用更具体的选择器，比如html body
对容器#hcon，结合类选择器写成.container#hcon

调整后的CSS示例：

html body {
  background-color: #fdf0d5;
}

.container#hcon {
  margin: 150px;
}

注：尽量避免使用!important，仅在其他方法都无效时作为最后手段。

3. 修正CSS语法错误

原始CSS中body的背景色值后多了一个分号#fdf0d5;;，虽然不会直接导致失效，但建议修正为#fdf0d5;，避免潜在的解析问题。

内容的提问来源于stack exchange，提问作者Mohit Tembhurkar

使用Bootstrap时自定义CSS stylesheet优先级低于Inline CSS的解决办法

问题场景 #

初始HTML代码 #

未生效的外部CSS代码 #

临时解决方案（内联CSS） #

问题原因及解决方法 #

1. 调整样式文件引入顺序 #

2. 提升选择器优先级 #

3. 修正CSS语法错误 #