无法从:hover元素中删除下划线&在chrome检查器中看不到文本装饰:下划线

Question

我的按钮在悬停时显示下划线。查看chrome检查器时，我的CSS被忽略，但没有其他css设置。

a:hover{text-decoration:none}

此处来自Chrome检查器的屏幕截图

​

还有更多HTML和CSS下面是两个代码片段

HTML

<div class='container'>
      <br />
      <br />
      <h1 class='header center  red-text text-lighten-1'>INFOSHOT</h1>
      <div class='row center'>
        <h5 class='header col s12 light'>Better and Easier Research</h5>
      </div>
      <div class='row center'>
        <a
          href='/register'
          id='download-button'
          class='btn-large waves-effect waves-light  red lighten-1'>
          Get Started
        </a>

      </div>

CSS

text-decoration: none;
color:white;
}

app.css

    /* CSS RESET */
/* @import '@atlaskit/css-reset'; */

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto');
/* Schemes */
/* @import './css/globalSettings.css'; */
/* Materialize */
@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Custom CSS */
@import './css/overides.css';```

Answer 1

尝尝这个

a:hover{text-decoration:none}

不是这个

a:hover:{text-decoration:none}

Answer 2

尝试：

a.btn:hover{ text-decoration: none !important; } or
a.btn:hover{ text-decoration: none; } 

谢谢。