使用CSS @layer覆盖Bootstrap 5框架样式失效问题咨询

你的核心问题是CSS @layer的声明顺序搞反了。

CSS @layer的优先级规则很明确：后定义的层级，优先级高于先定义的层级。你先声明custom层级，再声明framework层级，这就导致framework里的Bootstrap样式优先级比custom里的自定义样式更高，所以你的红色背景被Bootstrap的默认.navbar样式覆盖了。

正确实现方式 #

只需要调整层级的声明顺序，让自定义的custom层级在framework层级之后定义即可：

/* 先注册framework层级并导入Bootstrap */
@layer framework;
@import 'bootstrap.css' layer(framework);

/* 后定义custom层级，优先级更高 */
@layer custom {
  .navbar {
    background-color: red;
  }
}

或者更简洁的写法（浏览器会自动注册未提前声明的层级，注册顺序为代码出现顺序）：

/* 先导入Bootstrap到framework层级 */
@import 'bootstrap.css' layer(framework);

/* 后定义custom层级，自动注册且优先级更高 */
@layer custom {
  .navbar {
    background-color: red;
  }
}

补充说明 #

• 只要保证自定义样式所在的层级，在框架样式所在的层级之后声明，就能无需!important实现样式覆盖
• 如果多个层级手动注册，注册顺序直接决定优先级；未手动注册的层级，按代码中首次出现的顺序确定优先级

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