css - Bootstrap 3.0 中的自定义第一个孩子

Question

我有一个简单的表：

<table class="table table-condensed table-striped">
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
  </tr>
  <tr>
    <td>teste1</td>
    <td>teste2</td>
  </tr>
</table>

使用自定义 CSS：

tr:first-child {
    color: #696969;
    background-color: black; !important;
}

颜色已应用，但background-color, 未应用。为什么？随着作品last-child。background-color谢谢。

更新：如果我删除table-striped它就可以了。但我需要保留它。

更新 2：table-striped引导 CSS：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

Answer 1

改变

background-color: black; !important;

至

background-color: black !important;

Answer 2

找到了，是选择器的问题，B3使用的选择器更具体，现在把你的css按如下顺序放置。例子：

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">

并在 custom.css 中添加这个 css

.table-striped > tbody > tr:first-child > td,
.table-striped > tbody > tr:first-child > th {
    color: #696969;
    background-color:#000;
}

我已经测试过了，结果就是你需要的。 http://jsfiddle.net/TAp7T/1/

Answer 3

您不需要重要，只需向选择器添加更多类或 id 以使其像这样工作并将您的样式应用于td.

table.table-condensed.table.table-striped tr:first-child td{
    color: #696969;
    background-color: black;
}

在这里摆弄

Answer 4

与 无关!important，CSS 样式将应用于first-child或last-child。首先在 JSFiddle中查看，在first-childJSFiddle最后查看last-child. 可能您只展示了您项目的一部分，所以我们只能根据您提供的信息进行分析。该代码确实适用background-color于任何孩子。