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不可能有bug，只有浏览器可以（除非你指的是CSS规范中的错误等）。

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

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

a和:hover之间的空格表示:hover和 <{em>} 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>

我是刚刚发现CSS中的错误还是忽略了某些东西？

2 个答案: