html - 我只是发现CSS中的错误还是忽略了某些内容？

对于所有全球链接，我都有这些样式。我无法在同一页面的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;
}

提前致谢。

最佳答案

CSS不可能有bug，只有浏览器可以（除非您是指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;
}

关于html - 我只是发现CSS中的错误还是忽略了某些内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15971360/