Vue为*选择器添加data属性破坏优先级，如何解决？

问题拆解 #

你本来在全局CSS开头写这段代码重置内外边距：

*, body {
  margin: 0;
  padding: 0;
}

结果Vue给全局CSS的选择器自动套了data-v-xxx属性，变成这样：

[data-v-c9eed8c6], body[data-v-c9eed8c6] {
    margin: 0;
    padding: 0;
}

因为Element Plus的CSS比你的全局CSS先导入，这个优先级变高的选择器直接把Element Plus的样式覆盖了，而且你根本没开scoped CSS，是通过Vue配置里的CSS loader导入的全局样式。

可行解决方案 #

1. 换个方式导入全局重置样式 #

别用Vue组件的CSS loader导入重置文件，直接在项目入口HTML（比如index.html）里用<link>标签引入。这样Vue的样式处理逻辑碰不到这段代码，自然不会加data-v属性。

2. 精准控制重置范围 #

把重置代码改得更克制，只针对自己项目的元素，别影响第三方组件：

html, body {
  margin: 0;
  padding: 0;
}
/* 给根容器加个专属类，只重置自己项目里的元素 */
.my-project-container * {
  margin: 0;
  padding: 0;
}

给你的根组件容器加个唯一类名（比如my-project-container），只重置这个容器内部的元素，Element Plus的组件就不会被影响了。

3. 配置构建工具，排除重置文件 #

在Vue的配置文件（vue.config.js或者vite.config.js看你用啥）里，让CSS loader跳过对重置文件的处理：

• Vue CLI（webpack）配置：

module.exports = {
  chainWebpack: config => {
    config.module.rule('css')
      .exclude.add('/src/styles/reset.css') // 换成你实际的文件路径
      .end()
  }
}

• Vite配置：

export default {
  css: {
    modules: {
      exclude: ['/src/styles/reset.css'] // 换成你实际的文件路径
    }
  }
}

4. 临时用!important救急（不推荐） #

如果上面的方法暂时没法落地，可以给body的重置样式加!important，但绝对别给*加：

body {
  margin: 0 !important;
  padding: 0 !important;
}

这只是临时方案，优先用前面的方法从根源解决。

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