Bootstrap 4 Table Issues

Question

我目前正在制作一个模板与Bootstrap 4。我有一个四行表，这是到上述网站的链接:在这里。

现在我在这里为链接设置了CSS:

a {
color: #F0FFFF;
}
a:visited {
color: #00FFFF;
}
a:hover {
text-decoration: none;
}

但是在第四行，第四个链接不遵循上述CSS规则。我的问题是我在CSS上犯了一个错误吗?或者BootStrap 4对表有限制吗?对于BootStrap文档，它只展示了三行的示例。

Answer 1

表格HTML:

  <table class="table table-striped table-inverse">
  <thead>
  <tr>
  <th>Date</th>
  <th>Area</th>
  <th>Venue</th>
  <th>Tickets</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <th scope="row">June 16, 2017</th>
  <td>Auburn Hills, MI</td>
  <td><a href="https://www.palacenet.com/">Palace Of Auburn Hills</a></td>
  <td><a href="#">
    <button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
      Tickets!!
    </button></a>
  </td>
  </tr>
  <tr>
  <th scope="row">June 19, 2017</th>
  <td>Los Angeles, CA</td>
  <td><a href="http://www.lacoliseum.com/">Los Angeles Memorial Coliseum</a>      </td>
  <td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
      Tickets!!
    </button></a>
  </td>
 </tr>
 <tr>
  <th scope="row">June 23, 2017</th>
  <td>Toyko, Japan</td>
  <td><a href="http://www.nipponbudokan.or.jp/">Nippon Budokan</a></td>
  <td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
      Tickets!!
    </button></a>
  </td>
 </tr>
 <tr>
  <th scope="row">June 26, 2017</th>
  <td>Hong Kong</td>
  <td><a href="#">Hong Kong Festival</a></td>
  <td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
      Hey!
    </button></a>
  </td>
  </tr>
  </tbody>
  </table>