为什么外部CSS无法正确应用到h1、h2等元素上？

数据老陈

2026-10-18

问题原因

你遇到的样式覆盖问题核心是CSS文件加载顺序错误：
你在HTML的head标签中，先引入了自定义的css/styles.css，再引入Bootstrap的CSS文件。CSS的优先级规则中，权重相同的选择器，后加载的样式会覆盖先加载的样式。Bootstrap内置了h1、h2、h3等通用标题元素的默认样式，因此你的自定义标题样式被Bootstrap的规则覆盖了。
而#title的背景色样式可以正常生效，是因为Bootstrap默认没有针对#title这个ID的样式规则，不存在覆盖情况。行内样式的优先级远高于外部引入的样式，所以你用行内CSS修改属性可以正常生效。

解决方法

调整CSS文件引入顺序：将自定义styles.css的引入语句放在Bootstrap CSS的后面，这样你的自定义样式就能覆盖Bootstrap的默认规则，修改后的head部分引入顺序如下：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
<!-- 先引入第三方CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 后引入自定义CSS -->
<link rel="stylesheet" href="css/styles.css">

提升自定义选择器权重：如果需要进一步避免被覆盖，可以给标题选择器增加父级限定提升权重，示例如下：

/* 权重高于单纯的h1标签选择器，不会被Bootstrap默认样式覆盖 */
#title h1 {
  font-family: 'Limelight', cursive;
  line-height: 1.3;
  font-size: 90px;
  background-color: yellow;
}