设置 text-decoration: none 但链接仍带下划线答案

【问题标题】：Setting text-decoration: none but link is still underlined设置 text-decoration: none 但链接仍带下划线
【发布时间】：2015-03-20 20:44:16
【问题描述】：

我正在设计一个简单的按钮，我不希望文本链接有下划线。我将 text-decoration 设置为“none”，如下面的 css 所示，但它仍然带有下划线。我怎样才能摆脱它？

.button {
  border-style: solid;
  border-width: 2px;
  border-color: #63D3FF;
  background-color: #000E4D;
  text-align:center;
  display: inline-block;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  color:white;
}

.button a {
  text-decoration: none;  
}

HTML 是：

<a href="#" class="button">Save Choice</a>

【问题讨论】：

标签： css

【解决方案1】：

您的 CSS 将适用于类为 button 的元素内的链接，如下所示：

<span class="button"><a href="#">Save Choice</a></span>

但是在您的 HTML 中，链接本身具有类，所以在这种情况下，CSS 应该是这样的：

a.button {
  text-decoration: none;  
}

【讨论】：