外部CSS文件与Bootstrap无法同时生效，每次仅能加载一个样式表求助

AI 小北

2026-10-2

解决方案

1. 修正基础语法错误

你当前代码存在两处明显的语法问题，会直接导致样式加载/生效异常：

页面内3个img元素复用了同一个id rectangle_6，HTML规范要求id必须全局唯一，重复id会导致CSS选择器识别异常。请将id改为class属性：
```
<img src="skins/images (2).jfif" class="rectangle_6">
```
同时将untitled.css里的id选择器#rectangle_6对应改为class选择器.rectangle_6。
自定义样式的link标签rel属性值写成了大写的StyleSheet，虽然多数浏览器兼容大小写，但不符合W3C规范，建议统一修改为小写：
```
<link rel="stylesheet" type="text/css" href="untitled.css">
```
同时请确保你注释掉的那行自定义样式引用已经删除，避免重复加载样式文件。

2. 解决CSS权重覆盖问题

你已经将自定义样式放在Bootstrap样式之后，正常情况下后加载的样式优先级更高，但如果Bootstrap内置选择器的权重高于你的自定义选择器，还是会覆盖你的样式：

你可以给自定义选择器增加权重来提升优先级，比如调整为.container .rectangle_6，或者在需要保留的属性值后加!important（应急场景可用，不推荐大规模使用）：
```
.rectangle_6 {
  width: 200px !important;
  height: 200px !important;
  /* 其余自定义样式 */
}
```
你可以用浏览器F12开发者工具的元素面板，选中img元素后查看样式列表，被划掉的样式就是被覆盖的属性，可以直接看到是哪个文件的样式优先级更高，针对性调整即可。

3. 确认自定义样式文件路径正确性

打开浏览器F12的网络面板，刷新页面后查看untitled.css的请求状态，如果是404说明文件路径填写错误，调整为正确的相对/绝对路径即可。

附：问题相关代码

Homepage.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="untitled.css"> -->
    <link rel="StyleSheet" type="text/css" href="untitled.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
                        <img src="skins/images (2).jfif" id="rectangle_6">
        </div>
        <div class="col">
          <img src="skins/images (2).jfif" id="rectangle_6">
        </div>
        <div class="col">
                        <img src="skins/images (2).jfif" id="rectangle_6">
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  </body>
</html>

Untitled.css

对应内容可见提问时上传的样式文件截图。

效果对比

仅加载Bootstrap的页面效果可见提问时上传的对应截图
仅加载自定义CSS的页面效果可见提问时上传的对应截图

内容的提问来源于stack exchange，提问作者Naveen Singla