Question

我有以下课程：

.highlight-lighter {
   background-color: #fafafa;
}

以及下面的html，我试图使用bootstrap css实现条带表：

<div class="highlight-lighter ">
    <table class="table table-striped">
       <tbody>
          <tr class="row">
             <th class="col-sm-6">Foo</th>
             <th class="col-sm-6">Bar</th>
          </tr>
          <tr>
             <td class="col-sm-6">1</td>
             <td class="col-sm-6">2</td>
          </tr>
         <tr>
             <td class="col-sm-6">3</td>
             <td class="col-sm-6">4</td>
         </tr>
      </tbody>
    </table>
    <div>
        <p>some text</p>
    </div>
</div>

当我按照上面的表使用highlight-lighter类不再出现条带时 - highlight-lighter类似乎会覆盖表行的任何条带化？

我知道我可以通过将highlight-lighter课程移到最后一个div来修复，但我想知道为什么它会覆盖table-striped课程，因为我希望保留它作为它是在父div中吗？

Answer 1

实际上它没有覆盖table-striped因为这个类为某些行设置了背景颜色而没有为其他行设置，所以它使用了这个选择器.table-striped>tbody>tr:nth-of-type(odd)

因此，当您在父div上使用背景颜色时，会自动将该颜色填充到没有任何背景颜色的行中

如果你想修复它，你可能想通过添加这个代码将背景颜色设置为没有背景颜色的行：

.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fff;
}

请参阅代码段：

.highlight-lighter {
  background-color: #fafafa;
}

.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="highlight-lighter ">
  <table class="table table-striped">
    <tbody>
      <tr class="row">
        <th class="col-sm-6">Foo</th>
        <th class="col-sm-6">Bar</th>
      </tr>
      <tr class="row">
        <td class="col-sm-6">1</td>
        <td class="col-sm-6">2</td>
      </tr>
      <tr class="row">
        <td class="col-sm-6">3</td>
        <td class="col-sm-6">4</td>
      </tr>
    </tbody>
  </table>
  <div>
    <p>some text</p>
  </div>

CSS - 背景覆盖Bootstrap表条带

1 个答案: