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

【问题标题】：How to remove underline text decoration for the link element?如何删除链接元素的下划线文本装饰？
【发布时间】：2014-05-26 17:08:24
【问题描述】：

请看这个JS Bin。我想把Project name 作为链接。默认情况下，它在hover 上带有下划线。我怎样才能删除它？

我已经尝试分配一个班级project-name：

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

但它也会影响其他链接。

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

这之间有区别：a:focus .project-name 和这：a.project-name:focus。

第一个选择具有project-name 类的焦点a 的后代元素。第二个选择一个a，它有一个project-name 的类并且被聚焦。

说了这么多，你需要这样做：

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：