CSS样式不生效或生效后消失，刷新及Live Server无效求助

核心问题 #

1. 样式加载顺序错误：自定义的style.css在Bootstrap等第三方样式之前引入，导致第三方样式覆盖了你的自定义样式。
2. 重复引入样式资源：在<body>内重复引入所有第三方样式文件，加剧样式冲突的同时引发加载时序问题，导致样式先显示后消失。
3. <link>标签位置不当：将样式链接放在<body>内可能导致页面加载时样式解析延迟，出现闪烁现象。

修复步骤 #

1. 调整<head>内样式引入顺序

将第三方样式库放在自定义样式之前，确保自定义样式能覆盖默认样式：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My blog</title>
    <!-- 第三方样式库先引入 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' 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=Comfortaa:wght@300..700&display=swap" rel="stylesheet">
    <!-- 自定义样式最后引入，确保优先级 -->
    <link rel="stylesheet" href="css/style.css">
</head>

2. 清理<body>内重复资源

删除<body>开头所有重复的<link>标签，只保留Bootstrap的JS脚本：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<header class="container-fluid">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <h1>My site</h1>
      </div>
      <nav class="col-8">
        <ul>
          <li><i class='bx bxs-home'></i><a href="#">Главная</a></li>
          <li><i class='bx bxs-bowl-hot'></i><a href="#">Услуги</a></li>
          <li>
            <i class='bx bxs-user'></i><a href="#">Кабинет</a>
            <ul>
              <li>
                <a href="#">Админ панель</a>
              </li>
              <li><a href="#">Выход</a></li>
            </ul>
          </li>
          <li><i class='bx bxs-phone'></i><a href="#">О нас</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

额外说明 #

• 相同权重的CSS选择器，后加载的样式会覆盖先加载的，因此自定义样式必须放在第三方库之后。
• 重复引入资源不仅会导致样式冲突，还会增加页面加载时间，务必避免。
• 将所有<link>样式标签放在<head>内，能保证页面渲染时样式已就绪，避免出现样式闪烁或失效的问题。

内容的提问来源于stack exchange，提问作者Савелий Панин