Bootstrap-modal-leaflet自定义CSS样式不生效，求解决方案

我已在项目中导入leaflet-bootstrapmodal.js，将自定义样式文件style.css放在leaflet-bootstrapmodal.css之后引入，且HTML中使用了与插件相同的类名，但设置的.modal-content样式并未生效，相关代码如下：

HTML代码 #

<!-- Bootstrap modal-->
<link rel="stylesheet" href="bootstrap-modal/bootstrap-modal/leaflet-bootstrapmodal.css">
<!--My plugin -->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>

<nav class="navbar">
    <img src="globeBig.png" class="logo"/>
    <h1 class="title">The Gazetteer</h1> 
    <ul class="list">
        <!-- Button trigger modal 
        <li>
          <button type="button" id="button" class="btn btn-warning" data-toggle="modal" data-target="#Modal" disabled>
            Show weather forecast for:
          </button> 
        </li> -->
        <li class="selector">
            <select class="country">
                <option class="optionResult">Select a country</option>
            </select>
        </li>
    </ul>
</nav> 
<div class="container">
    <!-- Modal weather -->
    <div class="modal fade" id="Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title" id="exampleModalLabel"></h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal info -->
    <div class="modal fade" id="Info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title" id="infoModalLabel"></h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-info">
            <br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

<!-- Additional html..... -->

CSS代码（style.css） #

/* not working below:*/
.modal-content{
    background-color: red;
}

原因分析 #

1. 样式优先级不足：leaflet-bootstrapmodal.css中可能使用了更具体的选择器（比如.modal.fade .modal-content或包含其他父类的选择器），其优先级高于单一类选择器.modal-content，导致自定义样式被覆盖。
2. 浏览器缓存问题：浏览器可能缓存了旧的style.css文件，未加载最新的样式修改。
3. 动态样式覆盖：插件可能通过JavaScript动态添加了内联样式或更高优先级的CSS规则，覆盖了自定义样式。

解决办法 #

• 提升选择器优先级：使用更具体的选择器，比如针对特定模态框的ID：

  #Modal .modal-content, #Info .modal-content {
      background-color: red;
  }
  

  或者结合模态框的激活状态类：

  .modal.fade.show .modal-content {
      background-color: red;
  }
  

  （迫不得已时可使用!important，但不推荐，避免破坏样式层级：background-color: red !important;）
• 检查开发者工具：打开浏览器开发者工具（F12），找到.modal-content元素，查看Styles面板中生效的样式规则，确认是哪条规则覆盖了自定义样式，针对性调整选择器。
• 清除缓存强制刷新：使用Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制浏览器重新加载所有资源，确保最新的style.css被加载。
• 验证类名一致性：确认HTML中modal-content类名拼写正确，无大小写或空格错误。

内容的提问来源于stack exchange，提问作者Kyle Ghilotti