为什么我的导航链接仍然强调？即使有！重要声明

Question

我不确定这是否可能是由于php/wordpress引起的，但是我有一个导航栏，当您点击链接时，它会保持下划线，直到您再次悬停为止。觉得奇怪，我，我从来没有过这种情况并不能完全明白为什么..

<nav> 
    <ul> 
     <li><a href="#"><img src=" " height="10%" width="10%"/>Link 1</a></li> 

     <li><a href="#"><img src=" " height="10%" width="10%"/><a href="#">Link 2</a></li> 

     <li><a href="#"><img src="" height="10%" width="10%"/><a href="#">Link 3</a></li> 
    </ul> 
</nav> 

SCSS ..

nav { 
    margin: 0px; 
    background-color: $nav_bgcolor; 
    box-shadow: $nav_shadow; 

    ul { 
    color: #979797; 
    padding: 0px; 
    display: table; 
    width: 100%; 
    padding: 15px; 
    margin: 0px; 
    text-align: center; 
    } 
    ul li { 
    list-style-type: none; 
    display: inline-block; 
    width: 30%; 
    } 
    ul li a { 
    color: $font_color; 
    } 
    ul li a:hover { 
    cursor: pointer; 
    color: $hover; 
    } 
    a, a:visited, a:active, a:visited, a:focus, a:hover { 
    text-decoration: none !important; 
} 
} 

Answer 1

改变你的 “ul li a”，这样的：

nav ul li a { 
color: $font_color; 
text-decoration: none; 
} 

Answer 2

我上面的代码在解决我遇到的问题时确实是正确的。问题发生了，因为它没有更新我的任何代码，因为浏览器已经缓存了该网站。 感谢大家的帮助

注意：删除浏览器历史！

Answer 3

您需要一些HTML修复程序。 您已在anchor标签内使用anchor标签。

HTML

<nav> 
    <ul> 
     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 1 
     </a> 
     </li> 

     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 2 
     </a> 
     </li> 

     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 3 
     </a> 
     </li> 
    </ul> 
</nav> 

CSS

/*Random colors use your colors here*/ 
$nav_bgcolor:red; 
$nav_shadow:black; 
$font-color:white; 
$hover:green; 

/*Random colors use your colors here*/ 

nav { 
    margin: 0px; 
    background-color: $nav_bgcolor; 
    box-shadow: $nav_shadow; 

    ul { 
    color: #979797; 
    padding: 0px; 
    display: table; 
    width: 100%; 
    padding: 15px; 
    margin: 0px; 
    text-align: center; 
    } 
    ul li { 
    list-style-type: none; 
    display: inline-block; 
    width: 30%; 
    } 
    ul li a { 
    color: $font_color; 
    text-decoration:none; 
    } 
    ul li a:hover { 
    cursor: pointer; 
    color: $hover; 
    } 
    a, a:visited, a:active, a:visited, a:focus, a:hover { 
    text-decoration: none !important; 
} 
}