为什么 td 文本颜色不改变答案

【问题标题】：Why isn't the td text color changing为什么 td 文本颜色不改变
【发布时间】：2016-08-12 10:26:17
【问题描述】：

我有一个带有表格的视图，我正在尝试将td 中的每个文本设置为特定颜色。我正在使用 Bootstrap，但我在 Site.css 中所做的更改没有反映在视图中。

查看 (html)

<div class="row">
<div class="col-lg-12">
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new {id = "frmNumber", @class = "form-group"}))
    {
        <button class="btn btn-lg btn-success" id="btnGetNumbers" title="Get Numbers"></button>
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>1st Number</th>
                        <th>2nd Number</th>
                        <th>3rd Number</th>
                        <th>4th Numer</th>
                        <th>5th Number</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        @if (null != Model)
                        {
                            <td class="firstNumber">@Model.Numbers[0]</td>
                            <td class="secondNumber">@Model.Numbers[1]</td>
                            <td class="thirdNumber">@Model.Numbers[2]</td>
                            <td class="fourthNumber">@Model.Numbers[3]</td>
                            <td class="fifthNumber">@Model.Numbers[4]</td>
                        }
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    }
</div>    
</div>

CSS

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.firstNumber {
    color: red;
}

.secondNumber {
    color: blue;
}

.thirdNumber {
    color: green;
}

.fourthNumber {
    color: orange;
}

.fifthNumber {
    color: purple;
}

【问题讨论】：

我检查了您的 html 和 css .. 它正在工作，我可以看到 td 颜色...它可能已被引导程序覆盖..
@severinolorillajr 感谢您的回复，是的，这是我的猜测，但我的问题是如何让它工作
我不推荐这个，但简单的解决方法是添加!important。像 color: red !important; 这样的东西也可以尝试清除缓存。
记住 td 单元格不继承父单元格的属性。您的代码必须隐式设置每个单元格的样式。您使用的浏览器类型也会产生很大影响。我最信任 Chrome 和 Mozilla。
设置你的 css 选择器比 bootstrap css 选择器更具体。例如在表格中添加一个 ID

标签： html css asp.net twitter-bootstrap html-table

【解决方案1】：

我无法从这里确定，但我认为您忽略了一个事实，即您需要在 Bootstrap 的 CSS 之后加载 CSS。

【讨论】：

【解决方案2】：

根据我的检查，您的代码在 JSFiddle 上运行良好。也许为了更好地诊断覆盖您的 CSS 的内容是使用 Web 检查器检查规则。从那里您将能够适当地更改/重新排列 CSS 样式表。

【讨论】：

【解决方案3】：

从逻辑上讲，您应该将自定义 css 放在引导 CSS 之后，以便自定义覆盖任何引导样式（至少这对我自己来说通常是这样的），或者，你可以用凌乱的方式来做（！重要，不要。）

原来如此

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">

【讨论】：

加油！永远不要使用 !important！
“我不建议这样做”
我知道，对不起。我删除了它。
无论如何你都不应该提供它。您不知道 CSS 失败的原因。据您所知，其他地方可能有一个 !important 标志，这只会使问题更加复杂。
@BradEvans 没关系。 :p