为什么我的导航链接仍带有下划线？ 即使使用！important声明[重复]

Question

这个问题已经在这里有了答案：

• 对HTML进行编码时，浏览器并不总是能够检测到更改 6个答案
• 样式表未更新 11个答案

我不确定这是否可能是由于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;
 }
}