html - 我是刚刚发现了 CSS 中的错误还是忽略了什么？

Question

我在全局范围内为我的所有 a 链接设置了这些样式。我无法覆盖同一页面上 div 中的链接样式。

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

a:hover{
    text-decoration: underline;
}

现在我想重写 anchor 链接的样式，以便在悬停时将其颜色更改为白色，但仅限于多个类的 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 和 within 中的任何元素a，很像 .unseen a 表示 .unseen 中的 a 元素，因此这将不起作用。您需要删除该空间:

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