css - 尝试在 LESS 中覆盖 Bootstrap 表格条纹颜色不适用？

Question

我试图在我的 LESS 文件中创建一个继承自 Bootstrap 表的通用 CSS 类。如果我采用默认设置，它可以正常工作，但我想更改条纹行的颜色。做一些研究我发现一些代码应该工作但它不适用。实际上它覆盖了默认的 Bootstrap .table-striped 并且甚至不显示正常的白色背景颜色。

.vtc-table{
    .table;
    .table-condensed;
    .table-bordered; 
    .table-hover;
    .table-striped > tbody > tr:nth-child(odd) > td {
        background-color: antiquewhite;
    }
    th {
        background-color: #2FA4E7;
        color: white;
    } 
}

我只是在表级别调用公共(public)类。

<table class="vtc-table">

更新

非常感谢@makshh 的帮助，这最终是我们想出的方法。这会在整个表格以及行/单元格周围添加一个边框，将行的主要颜色设置为白色，然后将“奇数”行的颜色设置为古色古香的白色。希望这也会对其他人有所帮助。

.vtc-table { 
    border: 1px solid #ddd; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > tbody > tr > th, 
.vtc-table > tfoot > tr > th, 
.vtc-table > thead > tr > td, 
.vtc-table > tbody > tr > td, 
.vtc-table > tfoot > tr > td { 
    border: 1px solid #ddd; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > thead > tr > td { 
    border-bottom-width: 2px; 
}
.vtc-table > tbody > tr { 
    background-color: white; 
} 
.vtc-table > tbody > tr:nth-of-type(odd) { 
    background-color: #fcf8e3; 
} 
.vtc-table > thead > tr > th, 
.vtc-table > tbody > tr > th, 
.vtc-table > tfoot > tr > th { 
    background-color: #2FA4E7; 
    color: white; 
}

它在 HTML 中是这样调用的。

<table class="table vtc-table">

Answer 1

1. table-striped 类必须添加到 table div(您必须使用 &)。
2. strip 表的正确选择器是 .table-striped > tbody > tr:nth-of-type(odd)。
3. 如果你想改变th，你必须使用不同的选择器(以避免低特异性)。

.vtc-table {
  .table;
  .table-condensed;
  .table-bordered; 
  .table-hover;
  &.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: antiquewhite;
  }
  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > th {
    background-color: #2FA4E7;
    color: white;
  } 
}