我使用的是Bootstrap 3，我有一个显示一些数据的表格。在这个表格中，我应用了一些javascript的条件格式化，在满足条件的情况下，我将元素的类设置为 "红色"
.red {
background-color:red;
color:white;
}
元素的HTML如下。
<td class="red">0</td>
我现在有一个冲突，在奇数行中，文字的颜色是适用的，但背景颜色被下面的bootstrap的css覆盖了。
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
我如何解决这个冲突，并确保红色类占主导地位？
你的问题很可能是关于特殊性。Chris Coyier有一篇关于 CSS特殊性. 我也建议你看看这个方便的。特异性计算器.
使用该计算器，我们可以看到 .table-striped > tbody > tr:nth-child(odd) > td 具有23的特异性。因此，要覆盖它，任何新的规则都需要有一个等于或大于23的特殊性。.red 是在10，所以这是不可能的。
在这种情况下，它应该是简单的匹配现有的特异性，然后添加你的类到它。.table-striped > tbody > tr:nth-child(odd) > td.red 这样我们就有了33的特异性。因为33大于23，所以你的规则现在应该能用了。
请看这里的一个工作示例。http: /bootply.com91756
一般来说，你千万不要使用 !important 除非你永远不想让这个规则被推翻。!important 基本上是核选项。我适度自信地说，如果你理解特殊性，你应该永远不需要 !important 以使自定义规则在Bootstrap等框架中正常工作。
经过一番思考，我这里提供的规则可能有点过于具体。如果你想在一个没有被剥离的表格中高亮一个单元格，会发生什么？为了使你的规则更加全局化，同时又有足够的特异性来适用于剥离的表格，我会采用 .table > tbody > tr > td.red. 这与Bootstrap剥离有相同的特殊性，但也适用于非斑马线剥离的表。更新的例子在这里。http:/bootply.com91760
首先，请阅读Sean Ryan的答案--它非常好，信息量很大，但我必须在我的代码中实现之前对他的答案进行足够的调整，我希望有一个独特的答案，这可能会帮助下一个人。
我的问题和上一个问题几乎一样，但也需要能够突出显示行。下面是我如何增强(?)Sean Ryan的答案，并将其转化为我的最终实现，它允许你为大多数随机元素添加一个类，包括 "tr "或 "td"。
看到这个上 bootply.com
CSS
/* enable 'highlight' to be applied to most anything, including <tr> & <td>, including bootstrap's aggressive 'table-stripe'
see: http://stackoverflow.com/questions/19768794/custom-css-being-overridden-by-bootstrap-css
FYI: In the stack overflow question, the class is 'red' instead of 'highlight'
FYI: This is forked from http://www.bootply.com/91756
I used three different colors here for illustration, but we'd
likely want them to all be the same color.
*/
.highlight {
background-color: lightyellow;
}
/* supersede bootstrap at the row level by being annoyingly specific
*/
.table-striped > tbody > tr:nth-child(odd).highlight > td {
background-color: pink;
}
/* supersede bootstrap at the cell level by being annoyingly specific */
.table-striped > tbody > tr:nth-child(odd) > td.highlight {
background-color:lightgreen;
}
超文本标记语言
<table class="table table-striped">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1hi</td>
<td>hi</td>
<td>hi</td>
</tr>
<tr class="highlight">
<td>2hi</td>
<td>This row highlights fine since it was an even row to begin with, and therefore not highlighted by bootstrap</td>
<td>hi</td>
</tr>
<tr class="highlight">
<td>3hi</td>
<td>This whole row should be highlighted.</td>
<td>hi</td>
</tr>
<tr>
<td>4hi</td>
<td>hi</td>
<td>hi</td>
</tr><tr>
<td>5hi</td>
<td class="highlight">Just a specific cell to be highlighted</td>
<td>hi</td>
</tr>
</tbody>
</table>
您可以添加 !important 后面的每一种样式 .red 类。 添加 !important 基本上会赋予 CSS 更多的权重，让你可以覆盖其他样式。
你的CSS看起来会是这样的。
.red {
background-color: red !important;
color: white !important;
}
使用
.table-striped > tbody > tr:nth-child(odd) > td.red {
background-color:red;
color:white;
}
来创建更具体的选择器，或者使用 !important关键字（如Andrew所示）。
另外，可能是最好的，你可以创建一个自定义的bootstrap配置，其中不包括表格样式（取消选中通用CSS中的表格）。
你需要申请 !important 因为我们使用的选择器是 .table-striped > tbody > tr:nth-child(odd) > td，它比类规则更具体，并且会优先考虑。所以你需要用 !important.
但有两种方法可以解决这个问题。
使用 !important 来使一条规则更 "重要"。 我会避免这样做，因为当你有很多规则分布在几个文件中时，会很混乱。
为你要修改的 td 使用一个更高规格的选择器。 你可以添加一个id，这将允许你取代链接CSS文件中的规则。
你可以应用一个值为 !important 后面的值要优先。
不应用类，而是将css追加到元素上，是不是可以解决呢？
我也遇到过类似的问题，在使用 !important 问题一直存在。
这个问题取决于我们使用的是哪个浏览器，在我的情况下是chrome.通常chrome会存储经常使用的网站，并不总是完全重载页面。
这个问题在清除chrome历史记录后才得以解决。Ctrl+换挡+R.