当 bootstrap 被 linked 时，不能 link 外部 css

Question

我正在尝试 link 我的外部 css 文件，但当我 linking bootstrap 时它不是运行。当我注释掉 bootstrap link.

时，它得到 linked

body {
  background-color: black;
  font-size: 200px;
}

<!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">
  <title>document</title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
  it's not working.
</body>

</html>

Answer 1

你应该 link bootstrap 高于你自己的 css 文件

css是级联所以下层文件比较重要，可以重写上层文件

如果替换 link 标签无效，请使用 !important

Answer 2

有些物品需要 !important 与它们一起放置才能 over-ride Bootstrap 命令。

老实说，我不记得你的 body 元素上的 background 或 font-size 命令是否需要它，但我在下面使用它作为示例。

将相同的内容添加到任何似乎不起作用的自定义 CSS 命令中。

body {
  background-color: black !important;
  font-size: 200px !important;
}

当 bootstrap 被 linked 时，不能 link 外部 css

can't link external css when bootstrap is linked

css

bootstrap-5