CSS - 背景覆盖引导表条带化答案

【问题标题】：CSS - Background overwriting Bootstrap table-stripedCSS - 背景覆盖引导表条带化
【发布时间】：2017-07-02 01:11:27
【问题描述】：

我有以下课程：

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

以及我尝试使用引导 css 实现条带表的以下 html：

<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 中？

【问题讨论】：

它不是覆盖，它只是与引导样式非常相似的颜色。您正在应用 #fafafa 并且引导程序使用 #f9f9f9 作为条纹。因此，在表格后面应用#fafafa 将导致白色（实际上只是透明）行显示为#fafafa，而条纹行显示为#f9f9f9。您需要某种解决方案还是只是想知道为什么会这样？

标签： html css twitter-bootstrap

【解决方案1】：

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

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

如果你想解决这个问题，你可能想通过添加以下代码将背景颜色设置为没有背景颜色的行：

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

见代码 sn-p：

.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>

【讨论】：