CSS 无法识别所有选择器答案

【问题标题】：CSS not recognizing all selectorsCSS 无法识别所有选择器
【发布时间】：2020-08-17 14:37:34
【问题描述】：

我有一些 html 和 css，我正在尝试摆脱锚标记的蓝色和下划线

#title-bar {
    background-color: rgba(34, 70, 136, 0.87);
    color: black;
    font-size: 3em;
}

a { 
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit
}

a:hover { 
    text-decoration: none; 
    color: inherit; 
}

a:focus {
    text-decoration: none; 
    color: inherit; 
}

<div class='container-fluid'>
    <div class='row justify-content-center' id='title-bar'>
        <a href="/"><h1>Home Page</h1></a>
    </div>
</div>

背景颜色和 a 和 a:visited 颜色都可以正常工作，但 a:hover 由于某种原因不能。当我将鼠标悬停在上面时，它仍然会变成蓝色并带有下划线。奇怪的是，当我将“style='text-decoration: none'”添加到锚标记时，下划线消失了。有谁知道如何摆脱悬停装饰？

【问题讨论】：

您的代码工作正常，您可以编辑问题以明确问题所在吗？
奇怪的是它可以在 StackOverflows 的 sn-p 上运行，但在我的机器上却不能本地运行。这就是我的挫败感的来源。无论出于何种原因，它都无法在我这边正确渲染。

标签： html css

【解决方案1】：

您有color:inherit，它只使用用户代理的默认颜色。 text-decoration:none 对我来说很好用。

a,a:visited,a:hover{
  color:black;
  text-decoration:none;
}

&lt;a href="https://stackoverflow.com"&gt;Click&lt;/a&gt;

【讨论】：