悬停 link 后，css 声明不起作用

Question

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

.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>

这是 fiddle： 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

也许你会把 id 或 class name 作为 last li 并使 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

尝试将一些 class 放到按钮（最后一个元素）你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 select 或 select，您应该 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*/
}

悬停 link 后，css 声明不起作用

Upon hovering link, css declaration doesn't work

css

hover