html - 覆盖某些元素的 CSS 选择器

Question

我有一个 html 页面，我想对其进行样式设置(使用 IE9)。

以下代码:

<style type="text/css">
    #komponenter select,
    #komponenter input
    {
         width: 180px;
         box-sizing:content-box; 
    }

    .special_box { width: 50px; height: 150px; }
</style>

... snipp ...

<div id="col2" class="kolumn">

    @Html.LabelFor(model => Model.Verksamhetskod)
    <br />
    @Html.TextBoxFor(model => Model.Verksamhetskod)
    <br />

    @Html.Label("Lat/Long")
    @Html.TextBoxFor(m => m.LatitudTecken)
    @Html.TextBoxFor(m => m.Latitud)
    @Html.TextBoxFor(m => m.LongitudTecken)
    @Html.TextBoxFor(m => m.Longitud)
    <br />

    @Html.Label("3 Överväganden:")
    <br />
    @Html.TextBoxFor(m => m.Overvagande)
    <br />

    @Html.Label("1 Ingångsvärden:")
    <br />
    @Html.TextBoxFor(m => m.Ingangsvarde, new { @class = "special_box" })
    <br />
</div>

html 呈现良好，问题是 .special_box 宽度被上面的 css 语句覆盖(高度工作正常)。我试过将类放在样式部分的第一位，但没有任何区别。

Answer 1

这是一个特殊性的问题:试试这个(假设 .special_box 是一个 input 元素)

#komponenter select,
#komponenter input
{
     width: 180px;
     box-sizing:content-box; 
}

#komponenter input.special_box {
     width: 50px; height: 150px; 
}

像 #komponenter input 这样的规则具有 101 的特异性(1 个 ID，0 个类，1 个元素)
而 .special_box 的特异性为 10(1 个类，0 个元素)

参见 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/了解更多信息