设置文本修饰：无，但链接仍带有下划线

Question

我正在设计一个简单的按钮，我不希望文本链接有下划线。我将文本修饰设置为“无”，如下面的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>

Answer 1

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

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

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

a.button {
  text-decoration: none;  
}