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

我只是在桌面级别调用公共类。

<table class="vtc-table">

更新

非常感谢@makshh的帮助，这最终是我们想出来的。这会在整个表格以及行/单元格周围添加边框，将行的主要颜色设置为白色，然后为＆＃34; odd＆＃34;与antiquewhite行。希望这也会帮助其他人。

.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

table-striped类必须添加到table div（您必须使用＆amp;）。
条件表的正确选择器为.table-striped > tbody > tr:nth-of-type(odd)。
如果您想更改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;
  } 
}

试图覆盖无法应用的Bootstrap表条纹颜色？

1 个答案: