23

我正在使用 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;
}

我怎样才能解决这个冲突并确保红色阶级占上风？

4

8 回答 8

51

特异性

您的问题很可能与特异性有关。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基本上是核选项。我有信心说，如果您了解特异性，则永远不需要!important使自定义规则在像 Bootstrap 这样的框架中正常工作。

更新

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

于 2013-11-04T15:25:02.260 回答
5

首先，阅读 Sean Ryan 的答案 - 它非常好且内容丰富，但我必须在我的代码中实现之前对他的答案进行足够的调整，我希望有一个可能对下一个人有所帮助的独特答案。

我和 OP 有几乎相同的问题，但也需要能够突出显示该行。下面是我如何增强（？）肖恩瑞恩的答案并将其变成我的最终实现，它允许您向大多数随机元素添加一个类，包括“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>
于 2014-07-30T15:41:58.133 回答
2

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

你的CSS看起来像：

.red {
    background-color: red !important;
    color: white !important;
}
于 2013-11-04T13:34:45.183 回答
2

利用

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

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

Alternitvaly，可能是最好的，您可以创建一个自定义引导配置，其中不包括表格样式（取消选中 Common CSS 中的表格）

于 2013-11-04T13:40:44.960 回答
2

您需要申请!important课后风格。因为我们使用了选择器 is .table-striped > tbody > tr:nth-child(odd) > td，它比类规则更具体，并且会优先。所以你需要用!important.

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

  1. 用于!important使规则更“重要”。我会避免这样做，因为当您将大量规则分布在多个文件中时，这会让人感到困惑。

  2. 为要修改的 td 使用更高特异性的选择器。您可以添加一个 id，这将允许您取代链接的 CSS 文件中的规则。

读取 css 优先级

于 2013-11-04T13:53:52.673 回答
1

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

于 2013-11-04T13:35:10.543 回答
0

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

于 2013-11-04T14:01:54.450 回答
0

我也遇到了类似的问题，使用后!important问题也一直存在。

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

该问题仅在清除 chrome 历史记录或Ctrl++Shift后才解决R。

于 2020-06-02T14:26:33.797 回答