html - 使用 CSS 停止对 中 anchor 标记的悬停效果

Question

我页面上的所有链接都有 text-decoration: 悬停时下划线，但我试图在我的 div 中选择带有一类 Logo 的 anchor 标记并给它一个 text-decoration: none;所以基本上我希望我页面上的所有链接在悬停时都带有下划线，除了 .logo选择伪类时我在这里遗漏了什么吗？或者完全是别的东西。您能否也花点时间简要解释一下为什么“.logo a:hover { text-decoration: none;}"不起作用。

提前谢谢你

<header>
    <div class="wrapper">
        <div class="logo">
    <h3><a href="#heroSection">My Name</a></h3>
        </div>
        <ul>
            <li><a href="#aboutSection">About</a></li>
            <li><a href="#websitesSection">Websites</a></li>
            <li><a href="#projectsSection">Projects</a></li>
            <li><a href="#contactSection">Contact</a></li>
            <li><a href="#resumeSection">Resume</a></li>
        </ul>
    </div>
</header>

CSS如下

a:link{
    color: #000;
    text-decoration: none;
 }

a:visited{
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.logo a:hover {
    text-decoration: none;
}

Answer 1

我使用了您提供的示例代码，它按预期工作!您可以尝试清空缓存和硬重新加载，然后再次测试。

To hard reload in google chrome you need to first be in developer mode (F12) then you simply right-click on the reload button and select Empty Cache and Hard Reload.

如果您的浏览器正在缓存您的脚本，那么您的所有更新可能不会及时反射(reflect)在您的测试页面上。