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

Question

I have a view with a table, and i am trying to set each text in the td to be a specific color. I am using Bootstrap but i dont see the changes I have made in my Site.css reflect in the view.

View (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

From what I checked, your code is working fine on JSFiddle. Perhaps to better diagnose what is overriding your CSS would be to check the rules using web inspector. From there you will be able to make changes to / rearrange the CSS stylesheets appropriately.

Answer 3

Logically, you should put your custom css AFTER your bootstrap CSS so the custom overrides any bootstrap styling (least that's how it usually works for myself) or, you could do it the messy way (!important, don't.)

So it'd be

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