我正在使用Bootstrap 3，并且我有一个显示一些数据的表格。在这个表格中，我应用了一些JavaScript来进行条件格式化，如果满足某个条件，我会将元素的类设置为"red"。
.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 specificity中有一篇很棒的文章。我还建议你查看这个方便的特殊性计算器。
使用那个计算器，我们可以看到.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.com/91756
通常情况下，你不应该使用!important，除非你从不想被覆盖那个规则。 !important基本上是终极手段。我相当有信心地说，如果你理解特殊性，你就不需要在Bootstrap这样的框架中使用!important来使自定义规则正常工作。
经过一番思考，我提供的规则可能有些过于具体。如果您想突出显示一个未被剥离的表格单元格，该怎么办？为了使您的规则更全局化，同时仍具有足够的特定性，在剥去表格的情况下工作，我会选择使用.table > tbody > tr > td.red。这与Bootstrap剥离具有相同的特异性，但也适用于非斑马线剥离的表格。更新示例在此处：http://bootply.com/91760
首先，阅读Sean Ryan的答案 - 它非常好和有启发性，但在实现代码之前我必须对他的答案进行调整，因此我想提供一个明显的答案，可以帮助下一个人。
我几乎与OP有相同的问题，但还需要能够突出显示行。以下是我如何增强了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: https://dev59.com/sGIj5IYBdhLWcg3w6JA9
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;
}
HTML
<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>
使用
.table-striped > tbody > tr:nth-child(odd) > td.red {
background-color:red;
color:white;
}
.red类的每个样式后面添加!important。 添加!important基本上会给CSS更多权重，这样您就可以覆盖其他样式。.red {
background-color: red !important;
color: white !important;
}
!important。!important确实有效，但如果你试图向随机元素添加样式，则我的答案可能不适用于你，因为这不是原始问题所问的内容。 - Andrew!important。因为我们使用的选择器是.table-striped > tbody > tr:nth-child(odd) > td，这个比类规则更加具体并且会优先生效。所以你需要使用!important来覆盖它。使用!important使规则更加“重要”。我建议避免这样做，因为当你有很多规则分散在几个文件中时会很困惑。
为你想修改的使用更高特异性的选择器。你可以添加一个id，这将使你能够取代链接CSS文件中的规则。
!important的值。如果不使用类，而是将 CSS 添加到元素上，这不是一个解决方案吗？
我曾经遇到过类似的问题，即使使用了!important，问题仍然存在。
这个问题取决于我们使用的浏览器，对我来说是Chrome。通常情况下，Chrome会存储经常访问的网站，并不总是完全重新加载页面。
只有在清除Chrome历史记录或按下Ctrl+Shift+R之后，这个问题才得以解决。
!important，无论您在做什么！ - Sean Ryan