css - 设置文本装饰 : none but link is still underlined

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;  
}