Html 最后2个元素的悬停背景色不变

当锚元素处于悬停状态时，我试图改变它的背景颜色，问题是我无法用下面的样式实现这一点

jsfiddle

css

    .dropdown ul{
        margin:0; padding:0; float:left; width:100%; 
    }

    .dropdown ul li{
        list-style:none; float:left; width:100%;
    }

    .dropdown ul li a{
        float:left; width: 265px;  height:20px; padding:5px; 
        padding-top:10px; color:#000;  font-size:12px;  
        border-bottom:1px dotted #666;  background-color:#FFF;
    }

    .dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

    .dropdown ul li:last-child a{
        border-bottom:none;
    }

    .dropdown ul li a#pink{
        background-color:#FFE8E8;
    }

html

<div class="dropdown"> 
     <ul>
            <li><a href="/orders">Orders</a></li>
            <li><a href="/favourites">Favourites</a></li>
            <li><a href="/account" style="background-color:#FFE8E8;">Account</a></li>
            <li><a href="/settings" style="background-color:#FFE8E8;">Settings</a></li>
     </ul>
</div>

---

我很困惑，我不知道为什么这不起作用，如果有任何帮助，我们将不胜感激。

代码>！重要信息需要在结束前进行

.dropdown ul li a:hover {
    background-color:#F80101 !important; 
}

---

代码！重要信息需要在结束前进行

.dropdown ul li a:hover {
    background-color:#F80101 !important; 
}

将id=“pink”更改为class=“pink”，然后在css中将其添加到悬停中。下拉菜单ul li a.pink:hover

将id=“pink”更改为class=“pink”，然后在css中将其添加到悬停中。下拉菜单ul li a.pink:hover

添加以下内容：

错误：

.dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

正确：

添加以下内容：

错误：

.dropdown ul li a:hover{
        background-color:#F80101;  !important
    }

正确：

---

在语义上，两个元素具有相同的id是不正确的。此外，将id用作选择器会使规则具有非常高的优先级，这就是为什么需要使用

！重要信息

我建议将最后两个列表项链接设置为粉色的类，而不是id

然后您只需要在

：hover

规则之前声明

.pink

规则。由于这两个规则具有相同的优先级，并且

：hover

规则位于后面，因此它将覆盖

.pink

规则

HTML

---

在语义上，两个元素具有相同的id是不正确的。此外，将id用作选择器会使规则具有非常高的优先级，这就是为什么需要使用

！重要信息

我建议将最后两个列表项链接设置为粉色的类，而不是id

然后您只需要在

：hover

规则之前声明

.pink

规则。由于这两个规则具有相同的优先级，并且

：hover

规则位于后面，因此它将覆盖

.pink

规则

HTML

---

您对这两个元素使用了相同的id

pink

。很抱歉，原件不一样。您对这两个元素使用了相同的id

pink

。很抱歉，原件不一样

.dropdown ul li a.pink{
    background-color:#FFE8E8;
}
.dropdown ul li a:hover{
    background-color:#F80101;
}