如何删除链接元素的下划线文本修饰？

Question

请参阅此JS Bin。我想将Project name作为链接。默认情况下，它会在hover上显示为下划线。我该如何删除它？

我尝试过分配课程project-name：

  a:hover, a:focus .project-name {
    text-decoration: none;
  }

但它也会影响其他链接。

Answer 1

它之间存在差异：a:focus .project-name和此：a.project-name:focus。

第一个选择具有a类的焦点project-name的后代元素。第二个选择a，其project-name类为焦点。

所有这一切，你需要这样做：

a.project-name:hover, a.project-name:focus {
    text-decoration: none;
}

Answer 2

试试这个：

a.project-name:hover, a.project-name:focus {
    text-decoration: none !important;
}

Answer 3

  a.project-name:hover, a.project-name:focus{
    text-decoration: none;
  }