Css 同一页面中的不同悬停效果

我有点难以理解如何在同一页面中包含两个不同的悬停属性。我希望我的导航栏有一个不同的悬停效果，而不是我的网页中的某些内容

我目前的CSS如下所示：

a:hover {
    color: #CCC;
    background-color: #D8D8D8;
    cursor: default;
}

---

假设我只想将背景颜色从一个链接更改为下一个链接，那么上面的内容将如何更改？

您可以为链接使用不同的类：

<a class="typeA">foo</a>
<a class="typeB">bar</a>

a.typeA:hover {
    color: #CCC;
    background-color: #D8D8D8;
    cursor: default;
}

a.typeB:hover {
    color: #C0C;
    background-color: #fc0;
    cursor: default;
}

foo
酒吧
a、 a型：悬停{
颜色：#CCC；
背景色：#D8D8D8；
游标：默认值；
}
a、 B型：悬停{
颜色：#C0C；
背景色：#fc0；
游标：默认值；
}

a：悬停表示所有链接，#nav a：悬停表示nav，假设它位于一个名为nav的容器中