html - CSS - 背景覆盖 Bootstrap table-striped

Question

我有以下类(class):

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

以及以下 html，其中我尝试使用 bootstrap css 实现 strip 化表:

<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(奇数)

因此，当您在父 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>