引导规则和我的班级不合作答案

【问题标题】：Bootstrap rule and my class doesn't cooperate引导规则和我的班级不合作
【发布时间】：2015-05-11 23:42:28
【问题描述】：

在我的页面上，我使用引导程序。我创建了表，它有 3 个类，检查一下：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
</table>

现在我使用代码 jQuery。此代码添加了类突出显示。课堂亮点：

.highlight {
  background-color: orange;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
</table>

当 table 只有一个类时：“table”它正在工作。但我必须有表格条纹和表格边框。如果是，则突出显示仅适用于偶数。我该如何解决？

【问题讨论】：

要突出显示奇数？
我想强调两者。它突出显示表格行。
.highlight tr td 而不是 .highlight 在你的 css - jsfiddle.net/pujsghe6

标签： javascript html css twitter-bootstrap

【解决方案1】：

这是一个 css 特异性问题。

Bootstrap 像这样应用交替行类：

.table-striped>tbody>tr:nth-of-type(odd)

您需要尽可能具体。

行高亮示例：

.table>tbody>tr.highlight>td {
    // change your background color here
}

单元格高亮示例：

.table>tbody>tr>td.highlight {
    // change your background color here
}

注意：我假设您要突出显示某些行或单元格，而不是整个表格。

【讨论】：

你成功了。您帖子中的第二个示例是问题的答案。谢谢。

【解决方案2】：

如果我理解您的问题：每次您将带有 jQuery 的 highlight 添加到您的 table 时，都不会发生任何事情（或者并非所有表格都变成橙色）。

如果表的background-color 未设置在table 上，但可能设置在td 上。

尝试简单地更改您的 CSS 选择器：

.highlight{
    background-color:orange;
}

到

.highlight tr td{
    background-color:orange;
}

观看此示例：http://jsfiddle.net/pujsghe6/

【讨论】：

【解决方案3】：

在您的 jQuery 代码中，使用 .highlight > tbody > tr 而不是 .highlight

.highlight > tbody > tr {
   background-color: orange;
}

【讨论】：

是的，那个很好。这段代码也能正常工作，只是看不到你的 jQuery 代码。屏幕截图已发布。