html - 类的<a>元素未采用其类的CSS属性

在以下示例中，为什么带有类的元素没有采用各自的类（.1stBtn和.2ndBtn）CSS属性：

HTML：

<div class="heroContent">

    <a class="1stBtn" href="classes.html">Button 1</a>

    <a class="2ndBtn" href="http://eepurl.com/VsOdX">Button 2</a>

</div>

CSS：

.heroContent a {
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    padding: 14px 20px;
    border: 1px solid red;
}

.1stBtn {
    background-color: green;
    color: black;
    margin-right: 10px;
}

.2ndBtn {
    background: none;
    border: 1px solid #fff;
    color: #fff;
}

.heroContent a:hover {
    background-color: black;
    color: white !important;
    text-decoration: none;
}

在JSFiddle中：http://jsfiddle.net/tej5esho/3/

为了清楚起见，我希望按钮的文本颜色为白色，而.1stBtn背景颜色显示为绿色。

我也尝试用以下方式定位这些类：


  .1stBtn
  
  1stBtn
  
  .heroContent a.1stBtn


以上都不起作用。

非常感谢您的帮助。

最佳答案

正如伊曼纽尔（Emmanuel）所说，类名不能以数字开头，规则是：
命名规则：


必须以字母A-Z或a-z开头
后面可以跟：字母（A-Za-z），数字（0-9），连字符（“-”），
和下划线（“ _”）
在HTML中，所有值都不区分大小写