自定义css被bootstrap css覆盖

Question

我正在使用Bootstrap 3,我有一个显示一些数据的表.在这个表中我已经应用了一些javascript用于条件格式化,如果满足条件,我将元素的类设置为"红色"

.red {
background-color:red;
color:white;
}

元素HTML如下:

<td class="red">0</td>

我现在在文本颜色适用的奇数行上存在冲突,但背景颜色被引导程序中的以下css覆盖.

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

我怎样才能解决这个冲突,并确保红色班级能够进行优先考虑？

Answer 1

特异性

您的问题很可能与特异性有关.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.com/91756

!重要

一般情况下,!important除非您不希望覆盖该规则,否则永远不要使用.!important基本上是核选择.我有点自信地说,如果你理解特异性,你就不应该!important在像Bootstrap这样的框架中使自定义规则正常工作.

更新

经过一番思考,我在这里提供的规则可能有点过于具体.如果要高亮显示未剥离的表格上的单元格,会发生什么？为了使你的规则更具全局性,同时仍然具有足够的特异性以在剥离表中工作,我会选择.table > tbody > tr > td.red.这与Bootstrap剥离具有相同的特异性,但也适用于非斑马剥离的表.更新的示例如下:http://bootply.com/91760

Answer 2

首先，阅读 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: 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;
}

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>