CSS не распознает все селекторы

Question

У меня есть 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: посещения, но по какой-то причине a: hover не работает. Это все еще становится синим и подчеркнуто, когда я нахожусь над. Как ни странно, когда я добавляю «style = 'text-ornament: none'» к тегу привязки, подчеркивание исчезает. Кто-нибудь знает, как избавиться от парящих украшений?

Answer 1

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

Это "важно!" заставил код работать.

Answer 2

У вас есть color:inherit, который просто использует цвет по умолчанию для агента пользователя. И text-decoration:none отлично работает для меня.

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

<a href="https://stackoverflow.com">Click</a>