怎么确保这些样式规则在 Element Plus 的样式规则之后加载

为了确保你自定义的样式规则在 Element Plus 的样式规则之后加载，你可以使用以下方法之一：

1. 使用 `scoped` 属性

如果你在 Vue 组件中使用 `style` 标签来定义样式，可以将 `scoped` 属性添加到 `style` 标签中，以确保你的样式只应用于当前组件。这样，你的样式规则将在 Element Plus 的样式规则之后加载，并且只应用于当前组件。

例如：

<template>
  <div>
    <!-- your component content here -->
  </div>
</template>

<style scoped>
.el-notification__success {
  background-color: #67C23A;
  color: #fff;
}

.el-notification__error {
  background-color: #F56C6C;
  color: #fff;
}
</style>

2. 在 `main.js` 中导入 CSS 文件

如果你在 `main.js` 中导入 Element Plus，可以将你的样式规则保存在一个 CSS 文件中，并在 `main.js` 中导入它们。这样，你的样式规则将在 Element Plus 的样式规则之后加载，并且应用于整个应用程序。

例如：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import 'element-plus/lib/theme-chalk/index.css'; // 导入 Element Plus 样式文件
import './style.css'; // 导入自定义样式文件

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

在 `style.css` 文件中，你可以定义你的样式规则：

.el-notification__success {
  background-color: #67C23A;
  color: #fff;
}

.el-notification__error {
  background-color: #F56C6C;
  color: #fff;
}

这样，你的样式规则将在 Element Plus 样式规则之后加载，并且应用于整个应用程序。