为什么TD文字颜色没有变化

Question

我有一个带有表的视图，并且我试图将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;
}

Answer 1

我不能肯定地说，但我认为您已经忽略了需要在 Bootstrap的CSS 之后加载CSS的事实。

Answer 2

根据我的检查，您的代码在JSFiddle上运行良好。 也许要更好地诊断什么是超越CSS的方法，就是使用Web检查器检查规则。 从那里，您将能够适当地更改/重新排列CSS样式表。

Answer 3

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

所以会

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