使用 CSS 停止在 <div> 中的锚标记上的悬停效果

Question

我页面上的所有链接都有 text-decoration: underline 当悬停但我试图在我的 div 中选择带有类标志的锚标签并给它一个 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

我使用了您提供的示例代码，它按预期工作！ 您可以尝试Empty Cache and Hard Reload，然后再测试一次。

要在 google chrome 中硬重新加载，您首先需要处于开发者模式 (F12)，然后您只需 右键单击重新加载按钮并选择 Empty Cache and Hard 重新加载。

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