悬停链接时，css 声明不起作用

Question

我有这个导航链接，在悬停最后一个链接（样式为按钮）时，我希望它在悬停时具有粉红色而不是棕色的底部边框属性，以补充红色按钮。感谢您的帮助。提前致谢！

.header-nav a:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav a:last-of-type:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
} 

        <nav class="container header-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#cupcakes">Cupcakes</a></li>
                <li><a href="#cakes">Cakes</a></li>
                <li><a href="#events">Events</a></li>
                <li><a href="#contacts" class="btn nav-btn">Order Now!</a></li>
            </ul>
            <br>
        </nav>

这是小提琴： https://jsfiddle.net/ssqLspsn/

Answer 1

我做到了！！！看这里https://jsfiddle.net/Please_Reply/9hk6okpd/2/希望这是你想要的！！！

.header-nav a:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav .btn:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
} 

Answer 2

也许你会为最后一个 li 输入 id 或类名，并使 css 代码成为特定的 id :)

Answer 3

在检查悬停时应用了哪个 CSS 时，最好的办法是从控制台激活悬停属性。 您可以通过检查员在 Firefox 和 chrome 中执行此操作。 这是查看如何激活悬停属性的指南 See :hover state in Chrome Developer Tools

至于您的具体问题，如果您也发布了您的 html，这将有所帮助，因为如果您将样式应用于错误的元素，css 将无法正常工作。

.header-nav li:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav li:last-of-type:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
} 

祝你好运！

Answer 4

尝试为按钮添加一些类（最后一个元素） 你的css很好，虽然

喜欢

<div class="header-nav">
<a>some text</a>
<a>some text</a>
<a class="btn">some text</a>
</div>

css

header-nav .btn:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}

如果你想保留你的css选择器，你应该选择li，而不是a 拉普拉斯.header-nav a:last-of-type:hover 和.header-nav .li:last-child a:hover

Answer 5

我做到了！！！ https://jsfiddle.net/Please_Reply/9hk6okpd/2/希望这是你想要的！！！

.header-nav a:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav .btn:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}