ASP.NET MVC3 - 的site.css

Question

爲什麼沒有在我的site.css當我我的代碼更改任何變化：

.display-label, 
.editor-label 
{ 
    margin: 1em 0 0 0; 
} 

到

.display-label, 
.editor-label 
{ 
    margin: 1em 0 0 0; 
    color: Green; 
    font-weight: bold; 
} 

這裏我Details.cshtml：

@model ContosoUniversity.Models.Student 

@{ 
    ViewBag.Title = "Details"; 
} 

<h2>Details</h2> 

<fieldset> 
    <legend>Student</legend> 

    <div class="display-label">LastName</div> 
    <div class="display-field"> 
    @Html.DisplayFor(model => model.LastName) 
    </div> 

    <div class="display-label">FirstMidName</div> 
    <div class="display-field"> 
     @Html.DisplayFor(model => model.FirstMidName) 
    </div> 

    <div class="display-label">EnrollmentDate</div> 
    <div class="display-field"> 
     @Html.DisplayFor(model => model.EnrollmentDate) 
    </div> 
</fieldset> 
<p> 
    @Html.ActionLink("Edit", "Edit", new { id=Model.StudentID }) | 
    @Html.ActionLink("Back to List", "Index") 
</p> 

這究竟是爲什麼？是繼承造成這個？

這裏是整個的site.css：

body { 
    background-color: #2E8B57; 
    font-size: .85em; 
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
    color: #696969; 
} 

a:link { 
    color: #034af3; 
    text-decoration: underline; 
} 

a:visited { 
    color: #505abc; 
} 

a:hover { 
    color: #1d60ff; 
    text-decoration: none; 
} 

a:active { 
    color: #12eb87; 
} 

p, ul { 
    margin-bottom: 20px; 
    line-height: 1.6em; 
} 

header, 
footer, 
nav, 
section { 
    display: block; 
} 

* HEADINGS 
----------------------------------------------------------*/ 
h1, h2, h3, h4, h5, h6 { 
    font-size: 1.5em; 
    color: #000; 
} 

h1 { 
    font-size: 2em; 
    padding-bottom: 0; 
    margin-bottom: 0; 
} 

h2 { 
    padding: 0 0 10px 0; 
} 

h3 { 
    font-size: 1.2em; 
} 

h4 { 
    font-size: 1.1em; 
} 

h5, h6 { 
    font-size: 1em; 
} 

/* PRIMARY LAYOUT ELEMENTS 
----------------------------------------------------------*/ 

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */ 
.page { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

header, #header { 
    position: relative; 
    margin-bottom: 0px; 
    color: #000; 
    padding: 0; 
} 

header h1, #header h1 { 
    font-weight: bold; 
    padding: 5px 0; 
    margin: 0; 
    color: #fff; 
    border: none; 
    line-height: 2em; 
    font-size: 32px !important; 
    text-shadow: 1px 1px 2px #111; 
} 

#main 
{ 
clear: both; 
    padding: 30px 30px 15px 30px; 
    background-color: #fff; 
    border-radius: 4px 0 0 0; 
    -webkit-border-radius: 4px 0 0 0; 
    -moz-border-radius: 4px 0 0 0; 
} 

footer, 
#footer { 
    background-color: #fff; 
    color: #999; 
    padding: 10px 0; 
    text-align: center; 
    line-height: normal; 
    margin: 0 0 30px 0; 
    font-size: .9em; 
    border-radius: 0 0 4px 4px; 
    -webkit-border-radius: 0 0 4px 4px; 
    -moz-border-radius: 0 0 4px 4px; 
} 



/* Styles for validation helpers 
-----------------------------------------------------------*/ 
.field-validation-error { 
color: #ff0000; 
} 

.field-validation-valid { 
display: none; 
} 

.input-validation-error { 
    border: 1px solid #ff0000; 
    background-color: #ffeeee; 
} 

.validation-summary-errors { 
    font-weight: bold; 
    color: #ff0000; 
} 

.validation-summary-valid { 
    display: none; 
} 

/* Styles for editor and display helpers 
----------------------------------------------------------*/ 
.display-label, 
.editor-label 
{ 
    margin: 1em 0 0 0; 
    color: Green; 
    font-weight: bold; 
} 

.display-field, 
.editor-field 
{ 
    margin: 0.5em 0 0 0; 
} 

.text-box { 
    width: 30em; 
} 

.text-box.multi-line { 
    height: 6.5em; 
} 

.tri-state { 
    width: 6em; 
} 

Answer 1

可能的原因是一些其他風格的定義是壓倒一切的這一個。使用firebug可查看應用/覆蓋哪些樣式。

如果要覆蓋一個purticular風格，使用important關鍵字

.editor-label 
{ 
    margin: 1em 0 0 0; 
    color: Green !important; 
    font-weight: bold !important; 
}