Question

我的普通超链接颜色是橙色，但我希望我的按钮中的超链接颜色为白色而不是下划线。我该怎么做？

另外，如果我想在按钮之间留一些垂直间距，我该怎么做？

的jsfiddle： http://jsfiddle.net/huskydawgs/Uka5v/947/

HTML：

<p>Apple is <a href="http://www.apple/com/">cool</a></p>
<a class="btn" href="https://www.apple.com/">Get Started</a>
<a class="orange btn" href="https://www.apple.com/">Get Started</a>
<a class="blue btn" href="https://www.apple.com/">Get Started</a>

CSS：

.btn {
    text-align: center;
    border-radius: 0px;
    background-color: #616161;
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-family: sans-serif;
    text-decoration: none;
    line-height: 30px;         
    width: 138px;
    margin: 0 auto;
} 

.orange.btn {
    background-color: #f66511;
}

.blue.btn {
    background-color: #2251a4;
}

a:link {
    color:#f66511;
    text-decoration:none;
}

a:visited {
    color:#f66511;
    text-decoration:none;
}

a:active {
    color:#f66511;
    text-decoration:none;
}

a:hover {
    color:#f66511;
    text-decoration:underline;
}

Answer 1

您需要使用

.orange.btn {
    background-color: #f66511;
  }

  .blue.btn {
    background-color: #2251a4;
  }

（你错过了橙色和蓝色的“。”，这是该课程的主要内容。

对于垂直间距，您可以使用此css：

.btn {
  margin-bottom: 5px;
}

http://jsfiddle.net/Uka5v/940/

Answer 2

您没有正确定义变体类。试试这个：

.btn.orange {
    background-color: #f66511;
}

.btn.blue {
    background-color: #2251a4;
}

对于垂直间距，您可以在.btn类上设置底部边距。由于您已经拥有margin属性，因此您只需添加它：

margin: 0 auto 10px; // Added third argument for bottom value

这里是updated JSFiddle。

编辑：要更改橙色按钮的颜色，请在相应的类上设置color属性：

.btn.orange {
    background-color: #f66511;
    color: #fff;
}

Answer 3

将您的CSS更改为

  .orange {
        background-color: #f66511;
      }

      .blue {
        background-color: #2251a4;
      }

Answer 4

你只需要使用

.orange {
    background-color: #f66511;
}

.blue {
    background-color: #2251a4;
}

并查看边距以添加垂直间距。

我建议你了解你的HTML知识。请尝试使用codecademy进行交互式教程。

需要我的按钮上的白色文本而不是我有链接的橙色

4 个答案: