H1标签颜色无法修改求助：其他CSS选择器可正常生效

我是编程新手，若此问题较为浅显还请见谅。我已将HTML与CSS分离并完成关联，menu类和p标签的颜色可按CSS设置正常变化，但H1标签的文本“ROCHELLECODES”无法变为lawngreen，恳请帮忙排查解决。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <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="stylesheet" href="style.css" />
    <title>MYWEBSITE</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <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=Bebas+Neue&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container menu">
      <div class="row">
        <div class="col-3">About me</div>
        <div class="col-3">Contact Information</div>
        <div class="col-3">Certificates</div>
        <div class="col-3">gallery</div>
      </div>
    </div>
    <br />
    <h1>ROCHELLECODES</h1>
    <p>Welcome to my website</p>
  </body>
</html>

CSS代码 #

h1 {
  font-family: "Bebas Neue", sans-serif;
  color: lawngreen;
}
.menu {
  font-family: "Bebas Neue", sans-serif;
  color: blue;
}
p {
  font-family: "Bebas Neue", sans-serif;
  color: blueviolet;
}

问题原因及解决方法 #

• 原因：你把自定义的style.css放在了Bootstrap CSS的前面，Bootstrap自带的h1样式与你的自定义样式优先级相同，但因为后加载，所以覆盖了你设置的color: lawngreen。
• 解决方法：调整CSS引入顺序，把style.css的<link>标签移到Bootstrap CSS的<link>标签之后，这样自定义样式就能覆盖Bootstrap的默认样式：

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />

如果调整顺序后仍有问题，可以给h1样式提升优先级，比如写成body h1 { color: lawngreen; }，尽量避免使用!important，优先保证样式引入顺序的合理性。

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