我的Bootstrap 5 hover伪类不生效是什么原因？

Bootstrap内置的.btn-dark伪类样式优先级高于你当前写的自定义hover规则，同时如果你的自定义CSS引入顺序早于Bootstrap CSS文件，也会导致同权重下你的样式被覆盖。

• 方法1：调整CSS引入顺序，确保你的自定义样式代码/自定义CSS文件的引入位置，晚于Bootstrap CSS文件的引入标签，同权重样式后引入的会覆盖先引入的，示例结构如下：

  <!-- 先引入Bootstrap CSS文件 -->
  <link rel="stylesheet" href="你的bootstrap.css文件路径">
  <!-- 再写自定义样式或者引入你的自定义CSS文件 -->
  <style>
  body .btn-dark:hover {
    color: blue;
  }
  </style>
  
  <button type="button" class="btn btn-dark">Sign Up</button>
  

• 方法2：提升自定义规则的权重，更推荐给按钮新增自定义类，避免污染全局的Bootstrap按钮样式：
  HTML代码：

  <button type="button" class="btn btn-dark custom-signup-btn">Sign Up</button>
  

  对应CSS代码：

  .custom-signup-btn:hover {
    color: blue;
    /* 可按需补充背景色、边框色等其他属性 */
  }
  

• 方法3：如果上述方法都不生效，可以临时加!important强制提升优先级（不推荐频繁使用，会导致样式维护困难）：

  .btn-dark:hover {
    color: blue !important;
  }
  

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