global.css全局样式文件无法覆盖组件CSS样式的问题咨询

该现象是CSS层叠规则与资源加载顺序共同作用的结果：

• CSS规则生效遵循「权重优先，同权重下后加载的规则覆盖先加载规则」的逻辑
• 你在main.js顶部引入的global.css加载时机早于所有单文件组件的样式解析，同选择器优先级下，组件内后加载的样式自然会覆盖全局样式
• 若组件使用了<style scoped>，编译后会生成带自定义属性选择器的规则（如h1[data-v-xxxx]），优先级高于全局样式里的纯标签选择器，进一步提升了覆盖难度

方案1：调整全局样式引入位置（无侵入，优先推荐） #

不要在main.js顶部引入global.css，将该引入语句移动到所有组件注册、插件挂载逻辑的最末尾，保证全局样式是最后加载的资源。
参考main.js写法：

import { createApp } from 'vue'
import App from './App.vue'

// 此处放组件注册、插件引入等业务逻辑
// import router from './router'
// import store from './store'
// app.use(router).use(store)

// 全局样式放到所有逻辑最后引入
import './assets/global.css'

createApp(App).mount('#app')

该方案不需要修改任何组件代码，同优先级的全局规则因最后加载，会自动覆盖组件内的同选择器样式。

方案2：提升全局样式的选择器权重 #

如果不方便调整引入顺序，可以通过叠加选择器的方式提升全局规则的权重，最通用的写法是叠加:root或body选择器，不会改变样式的匹配范围：

/* global.css 中写法，权重高于组件内纯h1选择器 */
:root h1 {
  font-size: 35px;
}

极端覆盖场景下也可以使用!important标记，但不推荐常规使用，避免后续样式维护时优先级混乱：

h1 {
  font-size: 35px !important;
}

注意事项 #

如果组件内样式本身使用了更高权重的选择器（如.page-wrap h1、#app h1），需要对应提升全局样式的选择器权重，保证全局规则权重高于组件内规则才能实现覆盖。

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