特异性

Question

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

.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 specificity上有一篇很棒的文章。我还建议您查看这个方便的specificity calculator。

使用该计算器，我们可以看到.table-striped > tbody > tr:nth-child(odd) > td具有23的特异性。因此，要覆盖它，任何新规则都需要具有等于或大于23的特异性。{{1}是10，所以这不会削减它。

在这种情况下，它应该与匹配现有的特异性一样简单，然后将类添加到其中。 .red给出了33的特异性。当33大于23时，你的规则现在应该有效。

请参阅此处的工作示例：http://bootply.com/91756

！重要

一般情况下，除非您不希望覆盖该规则，否则不应使用.table-striped > tbody > tr:nth-child(odd) > td.red。 !important基本上是核选择。我有点自信地说，如果你理解特异性，你就不应该!important在一个像Bootstrap这样的框架中使自定义规则正常工作。

更新

经过一番思考，我在这里提供的规则可能有点过于具体。如果要高亮显示未剥离的表格上的单元格，会发生什么？为了使你的规则更加全局化，同时仍然具有足够的特异性来处理剥离表，我会选择!important。这与Bootstrap剥离具有相同的特异性，但也适用于非斑马剥离的表。更新后的示例如下：http://bootply.com/91760

Answer 2

首先，阅读Sean Ryan的回答 - 这是非常好的和内容丰富的，但我必须在我的代码中实现之前调整他的答案，我想要一个可以帮助下一个人的独特答案。

我和OP几乎有同样的问题，但也需要能够突出显示该行。下面是我如何增强（？）Sean Ryan的答案，并将其转换为我的最终实现，它允许您为大多数随机元素添加一个类，包括一个＆＃34; tr＆＃34;或者＆＃34; td＆＃34;

在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>

Answer 3

您可以在!important课程中的每个样式后添加.red。添加！important基本上会给CSS更多的权重，允许你覆盖其他样式。

你的css看起来像：

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

Answer 4

使用

.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

创建更具体的选择器，或者！important关键字（如Andrew所示）

Alternitvaly，也许最好，您可以创建自定义引导程序配置，其中不包括表样式（在常见CSS中取消选中表）

Answer 5

您需要在课堂风格后应用!important。因为我们使用的选择器是.table-striped > tbody > tr:nth-child(odd) > td，它比类规则更具体，并且优先。因此，您需要使用!important覆盖此内容。

但有两种方法可以解决这个问题：

使用!important使规则更“重要”。我会避免这样做，因为当你有很多规则散布在几个文件上时会让人感到困惑。
为要修改的td使用更高特异性的选择器。您可以添加ID，这样您就可以从链接的CSS文件中取代规则。

Read css Precedence

Answer 6

您可以在要优先使用的值之后应用!important的值。

Answer 7

这不是一个解决方案，而不是应用一个类，将css附加到元素？

Answer 8

我有一个类似的问题，在使用!important之后，问题仍然存在。

问题取决于我们使用的浏览器，在我的情况下是Chrome。 chrome通常会存储经常使用的网站，并不总是完全重新加载页面。

仅在清除镶边历史记录或 Ctrl + Shift + R 后，此问题才能解决。

自定义css被bootstrap css覆盖

8 个答案:

特异性

！重要

更新