Vite+Vue页面自定义CSS样式被划除覆盖，如何解决？

样式被浏览器划掉显示，本质是你的自定义样式优先级低于其他生效样式，或者存在作用域、加载顺序的冲突，按以下步骤排查解决：

1. 先查优先级，针对性提升 #

打开浏览器F12开发者工具，选中有问题的元素，查看「Styles」面板里的生效样式，找到把你自定义样式压下去的规则——它的选择器权重肯定比你的高（比如带ID的选择器比类选择器权重高）。

• 给你的选择器加更具体的层级，比如把.title改成#app .page .title（跟着DOM结构补充层级）。
• 应急可以用!important强制生效，但别滥用，比如font-size: 16px !important;，否则后续样式维护容易混乱。

2. 处理Vue组件的scoped样式坑 #

如果是单文件组件里加了scoped的样式失效：

• 要是你想修改子组件（尤其是Element Plus这类第三方组件）的样式，scoped会限制样式只作用于当前组件，得用深度选择器穿透：Vue3用:deep()，比如:deep(.el-input) { border-color: #ccc; }；Vue2用/deep/或者::v-deep。
• 要是你自己的组件不需要样式隔离，直接删掉scoped标签就行，注意别污染全局样式。

3. 调整样式加载顺序 #

Vite里样式加载顺序直接影响优先级，确保你的自定义样式在第三方样式之后导入：
比如在main.js里这么写：

// 先导入第三方组件库样式
import 'element-plus/dist/index.css'
// 再导入自己的全局样式，这样你的样式能覆盖第三方的
import './styles/global.css'

用Less/Sass这类预处理器的话，也要检查变量导入顺序，别让第三方变量覆盖你的自定义变量。

4. 干掉第三方冲突样式 #

要是第三方库的样式硬压过你的：

• 先在开发者工具里临时禁用第三方的冲突样式，确认是不是它导致的问题。
• 然后在你的全局样式里写和第三方完全一样的选择器，重新定义样式，只要你的样式加载在后面，就能覆盖它。

5. 检查index.html里的样式 #

如果是index.html中的样式被划掉：

• 确认样式写在<head>标签内，而且没被后面加载的CSS文件覆盖。
• 看看元素上有没有内联style属性，内联样式优先级比外部样式高，会直接覆盖你的样式。

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