如何设置active 和 hover 的优先级

在 Element UI 的导航菜单中，`active` 和 `hover` 样式的优先级通常是相同的，因为它们都代表着菜单项的选中状态。如果你想改变它们的优先级，可以使用 CSS 中的 `!important` 关键字来强制优先级。

例如，以下是一个简单的示例代码：

<template>
  <el-menu class="el-menu-demo" :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">菜单项1</el-menu-item>
    <el-menu-item index="2">菜单项2</el-menu-item>
    <el-menu-item index="3">菜单项3</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

<style>
  .el-menu-demo .el-menu-item--active,
  .el-menu-demo .el-menu-item--active:hover {
    background-color: #409EFF !important;
    color: #fff !important;
  }
</style>

在上面的代码中，我们使用 `!important` 关键字来强制优先级，从而实现在 `active` 和 `hover` 样式中优先显示 `background-color` 和 `color` 属性的效果。

需要注意的是，使用 `!important` 关键字可能会导致样式难以维护，因为它会覆盖其他优先级相对低的样式。因此，建议在使用 `!important` 之前先考虑其他方案，例如使用更精确的 CSS 选择器或者使用 JavaScript 来控制样式。