html - 我只是在 CSS 中发现了一个错误，还是我忽略了某些东西？

Question

我在全球范围内的所有链接都有这些样式。我无法覆盖同一页面上 div 中的链接样式。

a, a:visited{
    outline: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

现在我想覆盖锚链接的样式以在悬停时将其颜色更改为白色，但仅在多个看不见的类的 div 和像这样的通知容器中......

<div class="unseen notificationContainer">                     
    <a href="profile?customerId=1365764036258">
        <strong>robert</strong>
    </a>
    sent you a friend request 
    <a href="friend_request?type=accept&amp;notificationId=1365764054463">
        Accept
    </a>
    <a href="friend_request?type=reject&amp;notificationId=1365764054463">
        Reject
    </a>          
</div>

所以我将以下内容添加到我的 CSS

.unseen{
    background: #09f;
    color: #fff;
}

.unseen a :hover{
    color: #fff;
    text-decoration: underline;
}

当页面加载悬停在第一个链接上时，它的颜色变为白色，但其他三个采用背景的蓝色。在过去的一个小时里，我一直在做这个，而不是只是令人恼火。notificationContainer 的样式如下

.notificationContainer{
    width: 390px;
    float: left;
    border-bottom: solid 1px #eee;
    padding: 5px;
}

提前致谢。

Answer 1

CSS不可能有错误，只有浏览器可以（除非您的意思是CSS规范中的错误等）。

也就是说，这是您的代码中的错误，而不是浏览器中的错误：

.unseen a :hover{
    color: #fff;
    text-decoration: underline;
}

a和之间的空间:hover表示任何元素是:hover和内 a，很像.unseen a表示a内的元素.unseen，所以这不起作用。您需要删除该空间：

.unseen a:hover{
    color: #fff;
    text-decoration: underline;
}

Answer 2

不太确定你在追求什么——你的问题并没有说清楚。如果我猜错了，请原谅我。这有帮助吗？（您可以定位具有多个类的元素）

<style>
a, a:visited{
outline: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

.unseen.notificationContainer a:hover
{
    background: #09f;
    color: #fff;
    text-decoration: underline;
}
.notificationContainer
{
    display: inline-block;
    float: left;
    border-bottom: solid 1px #eee;
    padding: 5px;
}
</style>

和

<div class="unseen notificationContainer">                     
    <a href="profile?customerId=1365764036258"><strong>robert</strong></a>
    sent you a friend request 
    <a href="friend_request?type=accept&amp;notificationId=1365764054463">Accept</a>
    <a href="friend_request?type=reject&amp;notificationId=1365764054463">Reject</a>          
</div>